#yyds干货盘点#自适应布局方案
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干货盘点#自适应布局方案相关的知识，希望对你有一定的参考价值。
起步
rem 是什么
rem（font size of the root element）是指相对于根元素<html>来做计算的字体大小单位。
e.g. 设置html font-size: 75px 时，其他元素1rem = 75px，4rem = 300px
vw 是什么
vw是基于viewport视窗的长度单位。1vw等于window.innerWidth的1%
e.g. 设备物理宽度为375px时，1vw = 3.75px
dpr 是什么
设备像素比device pixel ratio简称dpr，即物理像素和设备独立像素的比值。
在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr。
iPhone 6、7、8的实际物理像素是750 x 1334，在开发者工具中我们可以看到：它的设备独立像素是375 x 667，设备像素比dpr为2
e.g. 如果给定一个元素的高度为200px(这里的px指物理像素，非CSS像素)，iphone6的设备像素比dpr = 2，我们给定的height应为200px/2=100dp。
postcss-px-to-viewport
postcss-px-to-viewport的做法其实没多大不同，它直接计算每个像素在设计稿中占据的%来输出vw，rem
设计稿 = 375px 时
转换 VW 方案
postcss-px-to-viewport:
unitToConvert: px, // 需要转换的单位，默认为"px"
viewportWidth: 375, // 视窗的宽度，对应设计稿的宽度
viewportUnit: vw, // 指定需要转
fontViewportUnit: vw, // 字体使用的视口单位
unitPrecision: 13 // 指定`px`转换为视窗单位值的小数后 x位数
...
复制代码
计算 1px 在设计稿中的占比，再换算成 vw
1px = 1 / 375 = 0.2666666666666% 即 100px = 26.6666666666666% = 26.6666666666666vw
实际渲染时（375px 的屏幕），26.6666666666666vw = 26.6666666666% * 375 = 100px
在 转换成vw的方案设置媒体查询超出宽度范围后固定body宽度，内容居中时，会出现样式过大影响查看的问题。
@media screen and (min-width: 1024px)
html
max-width: 1024px;
转换 REM 方案
避免不同浏览器的默认字体大小不一样导致大小不一致的问题，我们需要固定好root元素 html的font-size
恰好我们可以利用postcss-px-viewport不支持内联样式的转换。来设置root元素 html的内联font-size: 16px;来固定root的字体大小以适配转换成rem的方案。
1px = 1 / 375 = 0.2666666666666% 即 100px = 26.6666666666666% = 26.6666666666666rem
由于我们设置了root元素 html的内联font-size: 16px;来固定root的字体大小。因此，实际渲染时（375px 的屏幕），容器26.6666666666666rem = 26.6666666666666 * 16 = 426.6666666666656px
也就是说，我们需要更改viewportWidth的大小来和设计图适配。直接推导一下设计图与viewportWidth的倍数关系 = 426.6666666666656 / 100 = 4.26656倍。设置viewportWidth: 1599.96 （375 * 4.26656 = 1599.96）
同样设置媒体查询超出宽度范围后固定body宽度，内容居中
@media screen and (min-width: 1024px)
html
max-width: 1024px;
rem + vw
原则上也需要一个参考的设计图，这边假设为375px宽设计图。计算方法与postcss-px-to-viewport rem方案一至。
计算公式 ：
1vw = 3.75px 1px = 0.2666666666666667vw 100px = 26.6666666666666667vw
1rem = 26.6666666666666667vw = 100px
但需要注意的是，设置时需要把1rem设置成100px 对应的 vw值的值（防止小于浏览器最小字体），编写时根据设计图px / 100来编写。
当需要向上兼容自适应的时候，设置好@media对应不同的font-size即可。
同样设置媒体查询超出宽度范围后固定body宽度，内容居中。
html
font-size: 26.6666666666666667vw;
margin: 0 auto;
body
// 重置字体大小
font-size: 0.14rem;
@media screen and (min-width: 768px)
html
font-size: 9vw;
max-width: 768px;
以上是关于#yyds干货盘点#自适应布局方案的主要内容，如果未能解决你的问题，请参考以下文章
#yyds干货盘点# 前端歌谣的刷题之路-第一百四十七题-三列布局-浮动
#yyds干货盘点#CSS的clamp()函数实现响应式布局