### 1、响应式布局 **类型一：** 响应式布局，根据不同的屏幕分辨率，显示不同的布局。 *****  主要实现，在 head标签中加入meta标签，使得移动端浏览器将HTML页面放大宽度为试图viewport符合屏幕分辨率： ``` <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> // user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题 ``` 通过媒介查询 根据不同的屏幕尺寸设置不同的样式 ``` @media screen and (max-width: 980px) { .header { // ... } } /** iPad **/ @media only screen and (min-width: 768px) and (max-width: 1024px) { .header { // ... } } /** iPhone **/ @media only screen and (min-width: 320px) and (max-width: 767px) { .header { // ... } } ``` **注意：** 图片处理 ***** 处理方式一：可以采取百分比，缺点是图片可能放大或者缩小。可以尝试给图片设置最大宽度为百分比，这样图片过大，则缩小；图片小的，则原样显示 ``` img { width: auto; max-width: 100%; } ``` 处理方式二：用`::before`和`::after`伪元素 +content 属性来动态显示一些内容或者做其它事情，在 CSS3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能： ``` <img src="image.jpg" data-src-320px="image-320px.jpg" data-src-600px="image-600px.jpg" alt=""> ``` ``` @media (min-device-width:320px) { img[data-src-320px] { content: attr(data-src-320px, url); // url：地址 } } @media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); } } ``` **类型二：** 位置不变，随着窗口尺寸大小缩放达到效果，通过em，rem，rpx，upx，vh，vw，%等（相对）单位（配合）实现 *****  **rem计算：** ***** 浏览器默认`html`的默认`font-size:16px;`，这个不方便和实际设计稿尺寸换算。 在说明之前，首先知道：`html`标签的`font-size`决定`1rem`等于多少`px`，如：`html font-size:100px;`则`1rem===100px`； 那么设计图上的实际尺寸转换成`rem`：实际换算后的尺寸 (`60px / 100`) = `0.6rem`。 计算`fontSize` = 屏幕宽度(375px) / 设计稿宽度(375px)，则`font-size: 1px;`。 等等，会不会有什么问题呢？**当浏览器的px小于12px时，不生效**，如何解决，我们把它扩大100倍：`fontSize` = ( 屏幕宽度(375px) / 设计稿宽度(375px) ) * 100，则根元素`html font-size: 100px;`，那么`1rem===100px`。 计算公式：实际rem = ( 元素实际px / 100 ) * （ 屏幕px / 设计稿px ） 具体实现：https://www.kancloud.cn/vvmily_king/vvmily/2331775 *****  :-: 图一：实际设计稿尺寸750px *****  :-: 图二：实际设计稿尺寸375px ### 2、流式布局