移动端适配:在不同规格的移动设备上,页面能够尽可能统一地显示效果。
PC 端存在的是不同浏览器的兼容问题;移动端存在的是不同机型的兼容问题。
viewport 是可以设置布局视口等于视觉视口,页面就不需要再缩小以适应屏幕大小了。
rem、vw 等是写一份代码,可以在不同大小的屏幕上使元素也显示不同的大小。例如:设置一个100*100
的盒子,在 375px 的屏幕上显示是100*100
,在 414px 的屏幕上是125*125
等。
移动端设计稿一般使用 iPhone8 的宽度 375px 作为基准值。
百分比:
所有需要动态调整的元素都使用百分比来设置。
这种方式的缺点是:因为不同属性的百分比值,相对的可能是不同的参照物,所以百分比往往很难统一,因此百分比在移动端适配中时很少使用的。
媒体查询:
早期的布局方式,主要是通过查询设备的宽度来执行不同的 CSS 代码。
这种方式的缺点是:
- 根据屏幕大小划分了区间,但是在区间内无法再进行区分,无法实现 100% 兼容。
- 响应式布局的工作都是需要开发者去实现的,带来了额外的开发量。
- 不适合功能复杂的页面。
@media screen and (min-width: 375px){
html {
font-size: 14.0625px;
}
}
@media screen and (min-width: 360px){
html {
font-size: 13.5px;
}
}
@media screen and (min-width: 320px){
html {
font-size: 12px;
}
}
html {
font-size: 16px;
}
rem 单位 + 动态的 html 的 font-size
(已过时):
rem 单位是相对于 html 元素的 font-size
来设置的(1rem = html 元素的 font-size
),因此,如果需要在不同的屏幕下元素显示不同的大小,只需要:
- 针对不同的屏幕大小,动态地设置 html 元素的
font-size
。 - 使用 rem 作为单位来设置元素的大小。
视口的宽度影响根节点的字体大小, 根节点的字体大小影响元素的大小。
此处有两个比值关系:
视口的宽度 / 10 = 根节点的字体大小
:10 (或者任意数字)这一个比值是固定的,任何屏幕都需要经过这一步来计算得出根节点的字体大小。1rem = 根节点的字体大小
,根据根节点的字体大小计算出元素的 rem 值,这一比值也是固定的。
因此,实际开发中,只需要根据 UI 给的设计稿确定出一版的值(即设计稿这一版的值)即可。之后遇到不同大小的屏幕,会根据比值关系自动调整根节点的字体大小,元素的大小也就会跟着改变了。
针对不同的屏幕大小,动态地设置 html 元素的 font-size
:
有以下几种方案:
- 媒体查询:可以通过媒体查询来设置不同大小范围的屏幕的 html 的
font-size
尺寸。这种方式的缺点是:需要针对不同的屏幕大小编写大量的媒体查询;只能设置一定的范围,而不能根据屏幕大小的变化实时地变化元素的大小。 - 通过 JS 动态地计算:可以监听屏幕大小的实时改变,根据 html 元素的宽度计算出
font-size
的大小,然后设置到 html 元素上。<script> // 获取 html 元素 const htmlEl = document.documentElement function setRemUnit() { // 获取 html 元素的宽度(视口的宽度) const htmlWidth = htmlEl.clientWidth // 利用视口的宽度来获取 html 元素的 font-size 大小,一般都会使用视口的宽度除以 10 作为根节点的字体大小(其实除以任何值都可以,此处选择除以 10 只是为了方便之后计算元素的大小) const htmlFontSize = htmlWidth / 10 // 设置 html 元素的 font-size htmlEl.style.fontSize = `${htmlFontSize}px` } // 初始执行一次 setRemUnit() // 之后每次浏览器尺寸变化执行一次 window.addEventListener("resize", setRemUnit) </script>
- 直接引入淘宝开发的第三方库
lib-flexible
即可实现(推荐)。
计算元素的 rem 值:
-
手动计算:
元素的 rem 值= 元素的 px 值 / 根节点的字体大小
。如果使用 VSCode 编辑器开发的话,可以安装一款插件来协助计算转换后的 rem 值。
-
使用 postcss 的 pxtorem 插件:开发过程中照旧使用 px 像素即可,在打包时借助 Webpack 可以完成单位的自动转化(推荐)。
vw 单位(最推荐):
vw 自身将整个可见视口横向分成了 100 份,每一个份就是 1vw。使用 vw 单位只需要考虑一个问题,就是如何将尺寸换算成 vw 单位即可。
实际开发中,只需要根据 UI 给的设计稿确定出一版的值(即设计稿这一版的值)即可。之后遇到不同大小的屏幕,会根据屏幕大小和已经计算出的 vw 的值自动调整元素的大小。
vw 相比于 rem 的优势:
- 不再需要去计算和设置 html 的
font-size
。- 不再需要因为设置了 html 的
font-size
,而必须给 body 设置一个font-size
,以防止继承导致元素的font-size
大小异常。- 因为不依赖
font-size
,所以不需要担心某些原因 html 的font-size
被篡改导致页面尺寸混乱。- vw 相比于 rem 更加语义化,就是指 viewport 视口宽度的 1%。
- vw 具备 rem 的所有优点。
-
手动计算:以 375px 的设计稿为标准,
1vw = 3.75px
,因此,元素的 vw 值 = 元素的 px 值 / 3.75 px
。如果使用 VSCode 编辑器开发的话,可以安装一款插件来协助计算转换后的 vw 值。
-
使用
postcss-px-to-viewport-8-plugin
插件:开发过程中照旧使用 px 像素即可,在打包时借助 Webpack 可以完成单位的自动转化(推荐)。- 通过 npm 安装:
npm i postcss-px-to-viewport-8-plugin -D
。 - 在根目录下面新建
postcss.config.js
进行配置。module.exports = { plugins: { postcsspxtoviewport({ unitToConvert: 'px', // 需要转换的单位,默认为"px" viewportWidth: 375, // 设计稿的视口宽度 unitPrecision: 5, // 单位转换后保留的精度 propList: ['*'], // 能转化为vw的属性列表 viewportUnit: 'vw', // 希望使用的视口单位 fontViewportUnit: 'vw', // 字体使用的视口单位 selectorBlackList: [], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。 minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值,而不添加备用属性 exclude: undefined, // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件 include: undefined, // 如果设置了include,那将只有匹配到的文件才会被转换 landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: 'vw', // 横屏时使用的单位 landscapeWidth: 1920 // 横屏时使用的视口宽度 }) } } };
- 通过 npm 安装: