移动端适配，就是WebApp在不同尺寸的屏幕上等比显示 移动端适配的五种方法 ## 第一种方法：viewport适配 原理：通过设置 `initial-scale` , 将所有设备布局视口的宽度调整为设计图的宽度。 ``` //获取meta节点 var metaNode = document.querySelector('meta[name=viewport]'); //定义设计稿宽度为375 var designWidth = 375; //计算当前屏幕的宽度与设计稿比例 var scale = document.documentElement.clientWidth/designWidth; //通过设置meta元素中content的initial-scale值达到移动端适配 metaNode.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no"; ``` ## 第二种方法：借助media实现rem适配 rem：CSS的长度单位， 根元素字体大小的倍数，只与根元素字体大小有关； html 中的根元素即 html 元素。大部分浏览器的默认字体大小都是16px，所以1rem = 16px； **rem适配原理**： * 长度单位都是用 rem 设置 * 当屏幕尺寸改变时，只需要修改 html 元素的 font-size 即可实现等比适配 * 在制作页面时，只考虑跟设计稿相同的屏幕尺寸即可，其他尺寸屏幕自动适配 ``` //对屏幕大小划分了html不同的font-size @media screen and (min-width: 320px) {html{font-size:50px;}} @media screen and (min-width: 360px) {html{font-size:56.25px;}} @media screen and (min-width: 375px) {html{font-size:58.59375px;}} @media screen and (min-width: 400px) {html{font-size:62.5px;}} @media screen and (min-width: 414px) {html{font-size:64.6875px;}} @media screen and (min-width: 440px) {html{font-size:68.75px;}} @media screen and (min-width: 480px) {html{font-size:75px;}} @media screen and (min-width: 520px) {html{font-size:81.25px;}} @media screen and (min-width: 560px) {html{font-size:87.5px;}} @media screen and (min-width: 600px) {html{font-size:93.75px;}} @media screen and (min-width: 640px) {html{font-size:100px;}} @media screen and (min-width: 680px) {html{font-size:106.25px;}} @media screen and (min-width: 720px) {html{font-size:112.5px;}} @media screen and (min-width: 760px) {html{font-size:118.75px;}} @media screen and (min-width: 800px) {html{font-size:125px;}} @media screen and (min-width: 960px) {html{font-size:150px;}} ``` ## 第三种方法：JS配合修改配合rem适配 计算当前屏幕的宽度与设计稿比后用比例scale乘上100，因为rem是基于font-size值设置的，100便于计算，值可以为任意数，（Chrome中最小为12）。 比如某个元素，设计稿设计宽度为 640px， 需要在css中设置 width: 6.4rem 比如某个元素，设计稿设计字体大小是 16px， 需要在css中设置 font-size:0.16rem ``` var designWidth = 375; // 设计稿宽度 var remPx = 100; // 设置根元素字体大100px var scale = window.innerWidth / designWidth； //计算当前屏幕的宽度与设计稿比例 // 根据屏幕宽度 动态计算根元素的 字体大小 document.documentElement.style.fontSize = scale*remPx + 'px'; ``` ## 第四种方法：JS动态修改配合CSS预处理器（less） js获取当前屏幕的宽度，将屏幕宽度的16分之一设置给html的font-size。16可以为任意值，设置多少，js中屏幕宽度就除于多少再赋值给html的font-size。 ``` // 计算屏幕宽度 var screen = document.documentElement.clientWidth; // 计算字体大小，取屏幕宽度的16分之一 var size = screen / 16; // 设置根元素字体大小 document.documentElement.style.fontSize = size + 'px'; ``` 定义一个less变量等于16分之一的设计稿宽度 ，若设计稿中的某元素的宽高为200px。 ``` @rem: 375/16rem; .box{ width：200/@rem; height:200/@rem; } ``` **不需要进行单位数值的计算，只需要定义一个less变量，再查找替换将单位px换成 /@rem 即可** ## 第五种方法：JS动态修改配合rem适配 **不需要再在less中定义变量，只需要进行js获取配合查找替换px即可** ``` // 计算屏幕宽度 var screen = document.documentElement.clientWidth; // 设置根元素字体大小 document.documentElement.style.fontSize = screen + 'px'; ``` ``` .box{ width：200/375rem; height:200/375rem; } ``` **js动态获取屏幕宽度，直接将html的font-size设置为屏幕的宽度，再在less中进行换算**