页面响应式布局的要点

参考文章

响应式设计与自适应设计的区别

响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是 pc 端、平板、手机，从而请求服务层，返回不同的页面。

响应式布局实现方案

媒体查询

不管是移动优先还是 PC 优先，都是依据当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式。因此，移动端优先首先使用的是 min-width，PC 端优先使用的 max-width。

/* iphone6 7 8 */
body {
  background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width: 320px) {
  body {
    background-color: red;
  }
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
  body {
    background-color: #0ff000;
  }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
  body {
    background-color: blue;
  }
}

百分比布局

我们必须要弄清楚 css 中子元素的百分比到底是相对谁的百分比。直接上结论吧：

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

rem 布局

rem是css3中新增的单位，并且移动端支持度很高。

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

rem 响应式的布局思想：

• 一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值
• 高度值可以设置固定值，设计稿有多大，我们就严格有多大
• 所有设置的固定值都用 rem 做单位（首先在 HTML 总设置一个基准值：px 和 rem 的对应比例，然后在效果图上获取 px 值，布局的时候转化为 rem 值)
• js 获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了

rem布局也是目前多屏幕适配的最佳方式。

vw/vh 视口单位

vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

单位	含义
vw	相对于视窗的宽度，1vw 等于视口宽度的 1%，即视窗宽度是 100vw
vh	相对于视窗的高度，1vh 等于视口高度的 1%，即视窗高度是 100vh
vmin	vw 和 vh 中的较小值
vmax	vw 和 vh 中的较大值

vw 和%的区别为：
| 单位 | 含义 |
| —– | —————————————————————————- |
| % | 大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate 等) |
| vw/vh | 相对于视窗的尺寸 |

• 1 物理像素线（也就是普通屏幕下 1px,高清屏幕下 0.5px 的情况）采用 transform 属性 scale 实现

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  -webkit-transform: scaleY(0.5);
  -webkit-transform-origin: 50% 0%;
}

图片响应式

• 1.使用 max-width（图片自适应）

图片自适应意思就是图片能随着容器的大小进行缩放

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

• 2.使用srcset

<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">

如果屏幕的 dpi = 1 的话则加载 1 倍图，而 dpi = 2 则加载 2 倍图，手机和 mac 基本上 dpi 都达到了 2 以上，这样子对于普通屏幕来说不会浪费流量，而对于视网膜屏来说又有高清的体验。

响应式布局的成型方案

现在的 css，UI 框架等都已经考虑到了适配不同屏幕分辨率的问题，实际项目中我们可以直接使用这些新特性和框架来实现响应式布局。可以有以下选择方案：

• 利用上面的方法自己来实现，比如 CSS3 Media Query,rem，vw 等
• Flex 弹性布局，兼容性较差
• Grid 网格布局，兼容性较差
• Columns 栅格系统，往往需要依赖某个 UI 库，如 Bootstrap

要点

在实际项目中，我们可能需要综合使用响应式布局方案，比如用 rem 来做字体的适配，用 srcset 来做图片的响应式，宽度可以用 rem，flex，栅格系统等来实现响应式，然后可能还需要利用媒体查询来作为响应式布局的基础，因此综合上面的实现方案，项目中实现响应式布局需要注意下面几点：

• 设置 viewport
• 媒体查询
• 字体的适配（字体单位）
• 百分比布局
• 图片的适配（图片的响应式）
• 结合 flex，grid，BFC，栅格系统等已经成型的方案