通过 rem 来实现响应式布局:
首先来看, 什么是 rem 单位. rem 是一个灵活的, 可扩展的单位, 由浏览器转化像素并显示. 与 em 单位不同, rem 单位无论嵌套层级如何, 都只相对于浏览器的根元素 (html 元素) 的 font-size. 默认情况下, HTML 元素的 font-size 为 16px,
rem 单位都是相对于根元素 HTML 的 font-size 来决定大小的, 根元素的 font-size 相当于提供了一个基准, 当页面的 size 发生变化时, 只需要改变 font-size 的值, 那么以 rem 为固定单位的元素的大小也会发生响应的变化. 因此, 如果通过 rem 来实现响应式的布局, 只需要根据视图容器的大小, 动态的改变 font-size 即可.
rem2px 和 px2rem:
如果在响应式布局中使用 rem 单位, 那么存在一个单位换算的问题, rem2px 表示从 rem 换算成 px, 这个就不说了, 只要 rem 乘以相应的 font-size 中的大小, 就能换算成 px. 更多的应用是 px2rem, 表示的是从 px 转化为 rem.
比如给定的视觉稿为 750px(物理像素), 如果我们要将所有的布局单位都用 rem 来表示, 一种比较笨的办法就是对所有的 height 和 width 等元素, 乘以相应的比例, 现将视觉稿换算成 rem 单位, 然后一个个的用 rem 来表示. 另一种比较方便的解决方法就是, 在 CSS 中我们还是用 px 来表示元素的大小, 最后编写完 CSS 代码之后, 将 CSS 文件中的所有 px 单位, 转化成 rem 单位.
rem 布局的缺点:
通过 rem 单位, 可以实现响应式的布局, 特别是引入相应的 postcss 相关插件, 免去了设计稿中的 px 到 rem 的计算. rem 单位在国外的一些网站也有使用, 这里所说的 rem 来实现布局的缺点, 或者说是小缺陷是: 在响应式布局中, 必须通过 JS 来动态控制根元素 font-size 的大小. 也就是说 CSS 样式和 JS 代码有一定的耦合性. 且必须将改变 font-size 的代码放在 CSS 样式之前.
通过 vw 来实现自适应
什么是 vw?
css3 中引入了一个新的单位 vw, 与视图窗口有关, vw 表示相对于视图窗口的宽度, 除了 vw, 还有 vmin 和 vmax 两个相关的单位. 各个单位具体的含义如下:
单位含义 vw 相对于视窗的宽度, 视窗宽度是 100vw 相对于视窗的高度.
vw 和 % 的区别为:
单位含义 % 大部分相对于祖先元素, 也有相对于自身的情况(border-radius,translate 等)vw/vh 相对于视窗的尺寸
从对比中我们可以发现, vw 单位与百分比类似, 单确有区别, 前面我们介绍了百分比单位的换算困难, 这里的 vw 更像 "理想的百分比单位". 任意层级元素, 在使用 vw 单位的情况下, 1vw 都等于视图宽度的百分之一.
vw 单位换算:
同样的, 如果要将 px 换算成 vw 单位, 很简单, 只要确定视图的窗口大小(布局视口), 如果我们将布局视口设置成分辨率大小, 比如对于 iphone6/7 375*667 的分辨率, 那么 px 可以通过如下方式换算成 vw:
1px = (1/375)*100 vw
vw 单位的兼容性:
绝大多数的浏览器支持 vw 单位, 但是 ie9-11 不支持, vw 单位在绝大部分高版本浏览器内的支持性很好, 但是 opera 浏览器整体不支持 vw 单位, 如果需要兼容 opera 浏览器的布局, 不推荐使用 vw.
来源: http://www.bubuko.com/infodetail-2872606.html