响应式布局的实现

Posted 2021-02-20 windrunnermax

响应式布局的实现

响应式布局指的是同一页面在不同屏幕尺寸或者在不同的设备下有不同的布局，能够在大屏设备以及小屏设备获得更好的浏览体验，简单来说就是页面适应终端而无需为每个终端制作单独的页面。

媒体查询

通过使用CSS媒体查询来实现响应式布局，针对不同的媒体类型设置不同的样式规则，可以根据视窗、设备高度与宽度、设备方向、分辨率等进行不同CSS适配。

使用link链接

<!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="example.css">-->
<link rel="stylesheet" type="text/css" href="example.css" media="all and (max-width:600px)"/>

直接在CSS中使用

<!--
@media mediatype and|not|only (media feature){
    /* css样式 */
}
-->
<div id="t1"></div>
<style type="text/css">
    @media screen and (min-width:600px){ 
        #t1{
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
            background: red;
            transition: all .5s;
        }
    }
    @media screen and (max-width:600px) { 
        #t1{
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
            background: yellow;
            transition: all .5s;
        }
    }
</style>

使用@import导入

/* @import url("example.css") mediatype and|not|only (media feature); */
@import url("example.css") all and (max-width:600px);

媒体类型

• all: 用于所有设备。
• print: 用于打印机和打印预览。
• screen: 用于电脑屏幕，平板电脑，智能手机等。
• speech: 应用于屏幕阅读器等发声设备。

逻辑操作符

• and: 表示且，当所有的条件满足的时候返回true。
• not: 是用来排除某种制定的媒体类型。
• only: 用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
• ,: 逗号用于将多个媒体查询合并为一个规则，逗号分隔效果等同于or逻辑操作符。

媒体功能

• aspect-ratio: 定义输出设备中的页面可见区域宽度与高度的比率。
• color: 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0。
• color-index: 定义在输出设备的彩色查询表中的条目数，如果没有使用彩色查询表，则值等于0。
• device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的比率。
• device-height: 定义输出设备的屏幕可见高度。
• device-width: 定义输出设备的屏幕可见宽度。
• grid: 用来查询输出设备是否使用栅格或点阵。
• height: 定义输出设备中的页面可见区域高度。
• max-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最大比率。
• max-color: 定义输出设备每一组彩色原件的最大个数。
• max-color-index: 定义在输出设备的彩色查询表中的最大条目数。
• max-device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最大比率。
• max-device-height: 定义输出设备的屏幕可见的最大高度。
• max-device-width: 定义输出设备的屏幕最大可见宽度。
• max-height: 定义输出设备中的页面最大可见区域高度。
• max-monochrome: 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
• max-resolution: 定义设备的最大分辨率。
• max-width: 定义输出设备中的页面最大可见区域宽度。
• min-aspect-ratio: 定义输出设备中的页面可见区域宽度与高度的最小比率。
• min-color: 定义输出设备每一组彩色原件的最小个数。
• min-color-index: 定义在输出设备的彩色查询表中的最小条目数。
• min-device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最小比率。
• min-device-width: 定义输出设备的屏幕最小可见宽度。
• min-device-height: 定义输出设备的屏幕的最小可见高度。
• min-height: 定义输出设备中的页面最小可见区域高度。
• min-monochrome: 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
• min-resolution: 定义设备的最小分辨率。
• min-width: 定义输出设备中的页面最小可见区域宽度。
• monochrome: 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0。
• orientation: 定义输出设备中的页面可见区域高度是否大于或等于宽度。
• resolution: 定义设备的分辨率。
• scan: 定义电视类设备的扫描工序。
• width: 定义输出设备中的页面可见区域宽度。

单位

百分比单位

当度量单位设置为百分比时，即可使浏览器组件宽高随着浏览器的大小相应变化。

• 子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。
• 子元素的top和bottom如果设置百分比，则相对于直接非static定位的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位父元素的宽度。
• 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
• 子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width。
• 设置border-radius为百分比，则是相对于自身的宽度，还有translate、background-size等都是相对于自身的。

em单位

em是相对长度单位，相对于当前对象内文本的字体尺寸，若未设置则相对于浏览器默认字体尺寸16px，em是会继承父元素的字体的尺寸，使用时需要重新计算子元素的em值避免1.2*1.2=1.44的现象，使用em可以使元素根据字体大小的动态调整来制作响应式布局。

rem单位

rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生相应的变化。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变根元素的font-size即可。

vh vw vmin vmax

• vh: 相对于视窗的高度，1vh等于视窗高度的1%。
• vw: 相对于视窗的宽度，1vw等于视窗宽度的1%。
• vmin: vw和vh中的较小值。
• vmax: vw和vh中的较大值。

缩放比例

通过动态地控制网页视图的缩放比例来制作响应式布局。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />

自适应布局

自适应布局一般是通过检测User-Agent来判断当前访问的设备是PC端还是平板或者是手机，或者是通过检测窗口分辨率而请求服务器，从而服务端重定向或者返回不同的页面，需要开发多个页面来适应不同的设备，通常自适应布局与响应式布局并不是单独使用的，可以通过开发一套PC端页面与一套移动端页面来实现自适应布局，而两套页面都实现对于不同范围分辨率的响应式布局，可以避免过大的CSS样式表又可以获得较好的浏览体验，

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.w3.org/TR/css3-mediaqueries/
https://juejin.im/post/5caaa230e51d452b672f9703
https://www.cnblogs.com/yanayana/p/7066948.html
https://www.cnblogs.com/jianxian/p/12808363.html
https://www.runoob.com/cssref/css3-pr-mediaquery.html
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries