[TOC] ## 概述 ### rem 和 em * rem 即：‘The font size of the root element’，就是以根元素 的字体大小为基本单位，是一种相对单位。rem 适配的原理就是以 html 的 font-size 大小为基本单位来布局。 * em 是另一种相对单位，它相对于该元素本身的 font-size 值来计算。 ### vw ## 移动端适配方案 ### 1. 媒体查询 link 元素中的 CSS 媒体查询，不同屏幕加载不同样式文件： ``` <link rel="stylesheet" media="(max-width: 500px)" href="mobile.css" /> <link rel="stylesheet" media="(min-width: 980px)" href="pc.css" /> ``` CSS 样式表中的媒体查询： ``` @media only screen and (max-width: 414px){ html{ font-size: 64px; } } @media only screen and (max-width: 375px){ html{ font-size: 58px; } } @media only screen and (max-width: 360px){ html{ font-size: 56px; } } @media only screen and (max-width: 320px){ html{ font-size: 50px; } } ``` ### 2.动态 rem 方案 对于不同屏幕，我们只需要动态修改根元素字体大小，元素大小就会同比例改变，从而做到页面的自动适配效果 - 假设设计稿宽度为 750px，元素A宽度为 300px，在屏幕宽度为 375pt 的屏幕中，设置根元素字体大小为 75px，则元素A宽度为 4rem； - 在屏幕宽度为 750pt 的屏幕中，只需将根元素字体大小改为 150px，不需要改变元素A的大小，就可以做到页面适配 ``` (function flexible (window, document) { var docEl = document.documentElement // 根据屏幕宽度设置根元素字体大小，set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit() } }) }(window, document)) ``` **文本字号不建议使用 rem** 使用动态 rem 方案需要做的工作 ### 3. Viewport 方案（推荐） 面介绍的动态 rem 方案，其本质是让页面元素大小跟随屏幕宽度的变化成比例缩放。 CSS Viewport units （视口单位）正是一种相对于屏幕宽高的一种长度单位，并且兼容性越来越好。视口单位有：vw、vh、vmin和vmax。vw 单位表示根元素宽度的百分比，1vw 等于视口宽度的1%。 vw 适配方案的流程： 1. meta 标签设置 viewport 宽度为屏幕宽度； 2. 开发环境配置 [postcss-px-to-viewport](https://link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fpostcss-px-to-viewport "https://www.npmjs.com/package/postcss-px-to-viewport") 或者类似插件； 3. 根据设计稿写样式，元素宽高直接取设计稿宽高即可，单位为 px，插件会将其转换为 vw； 4. 段落文本也按照设计稿写，单位为px，不需要转换为 vw； ### 4.固定 Viewport 宽度方案（整体缩放） 所谓固定 viewport 宽度，即将网页布局视口的宽度设置为设计稿的宽度，不管是在哪种设备上，网页的布局视口宽度都是固定的 如果设计稿的宽度为 750px，那么我们就可以将布局视口设置如下： ``` <meta name="viewport" content="width=750, user-scalable=no" /> ```