【移动端】适配方案

1. rem适配

rem 大概 vw，vh 等实现 差别的设配有雷同的比例 实现适配。
实用于移动端各种适配
1.1 先标准视口

1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
2. // name是用来指定适口的
3. // content 具体内容，第一个width宽度等于设备宽度，initial-scale缩放比例是1，最大的缩放比例也是1，然后不允许用户缩放。
4. // 里面的width和initial-scale都是指定ideal viewport，如果两者都存在，那么取两者之间的较大值。

复制代码

1.2 通过 js 动态设置 html 的 font-size 值，一样寻常是装备宽度的 1/10

1. function resetHtmlFont () {
2.         document.documentElement.style.fontSize = screen.width / 10 + 'px'
3. }

复制代码

1.3 盘算 rem 值（视觉稿div元素的宽度 / font-size ）
假定条件，UI视觉稿宽度 750px，div元素 375px，
当装备宽度为 750，div元素 375px，通过第二步调盘算出 font-size = 75px，rem = 5（div元素 / font-size）
当装备宽度为 375，div元素依照视觉稿比应该是 187.5px，通过第二步调盘算出 font-size = 37.5px，rem = 5（div元素 / font-size）
1.4 如果UI给定200px宽度，又即是 n rem？盘算非常贫困
vscode 编辑器安装 px to rem插件，根据插件文档，本地设置 .cssrem 参数，实现css样式px自动转换rem值。
弊端：
如果发现某个元素显着宽度不对，但是又无法从rem值判定是否精确。
gulp 一样寻常会保存px源码，同时通过第三方工具动态监听转换。
2. 相应式布局

通过@media媒体监听 实现 一套html共同多套css 实现适配。不是等比缩放，是同一块内容在差别装备上有公道的体现。
实用于pc端项目同时适配于移动端
2.1 先标准视口

1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
2. // name是用来指定适口的
3. // content 具体内容，第一个width宽度等于设备宽度，initial-scale缩放比例是1，最大的缩放比例也是1，然后不允许用户缩放。
4. // 里面的width和initial-scale都是指定ideal viewport，如果两者都存在，那么取两者之间的较大值。

复制代码

2.2 css 的媒体监听语法

1. @media screen and (max-width: 750px) {}

复制代码

3 vw，vh

vw 是相对单位，1vw体现屏幕宽度的1%，须要缩放的元素采取vw，不须要缩放的采取px。具体实现方法与rem雷同，至于转换标题也可以参考rem的插件情势。
4 微信小步调css单位 rpx

换算方法 1px = 2rpx