TIPS--移动端做适配

1.meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0,
 maximum-scale=1.0, user-scalable=0">
 // width=device-width: 让当前viewport宽度等于设备的宽度
 // user-scalable=no: 禁止用户缩放
 // initial-scale=1.0: 设置页面的初始缩放值为不缩放
 // maximum-scale=1.0: 允许用户的最大缩放值为1.0
 // minimum-scale=1.0: 允许用户的最小缩放值为1.0
复制代码

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

2.媒体查询

使用 @media 查询，可以让开发人员针对不同的媒体类型，定义不同的样式

其基本语法是:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
复制代码

我们也可以针对不同的媒体使用不同的 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)"
href="mystylesheet.css">
复制代码

3.动态 rem方案

 document.documentElement.fontSize = window.innerWidth / 10 + 'px'
复制代码

rem可以根据根元素(html)，来设置字体大小,

即1rem = 根元素html字体大小

通过对不同设配屏幕宽度，设置不同的html字体大小，我们就可以实现适配多种设备 那么如何设置不同设备的html大小呢?

一般有两种做法:

方法一: 通过JavaScript读取屏幕宽度，然后根据宽度计算出对应的尺寸并设置根元素的font-size;
方法二: 通过媒体查询，设置html的字体大小
复制代码

通过rem计算，通常在把px转换为rem的过程中，往往需要我们手动计算，这样就很麻烦 我们可以通过Sass，来解决这个问题:

@function px2rem($px){
    $rem : 37.5px;  //页面基准值，为设计稿宽度
    @return ($px/$rem) + rem;
}
复制代码

转载于:https://juejin.im/post/5b88b2596fb9a01a0c0ff590