移动端是怎么做适配的？（16年腾讯前端面试题）

主要分以下三点回答：

1.meta viewport

一个典型的移动端适配包含以下的内容：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

width设置了视口的宽度，比如width=300,也可以设置为设备的宽度为device-width，initial-scale控制了页面加载时候缩放的等级，maximun-scale为用户最大缩放值，还有其他三个属性，minimun-scale为用户最小缩放值，height为视口的高度，user-scalable为是否允许用户进行缩放。

 

2.媒体查询

举个例子：

<style type="text/css">
@media (max-width: 1440px){
    body{
        
    }
}
    @media (max-width: 600px){
        body{
            ">        }
    }
    @media (max-width: 400px){
        body{
            ">        }
    }
style>

当屏幕的宽度在0~400px的时候，背景色为yellow，当屏幕宽度在400~600px之间，背景色为red，当背景色在600-1440之间的时候，背景色为blue，还有一种方式就是在满足条件的时候加载指定的css文件，如下：

<link rel="stylesheet" type="text/css" href="/mobile.css" media="(max-width:500px)">

当屏幕的宽度小于500px的时候，就会使用mobile.css文件

 

3.动态REM

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write('')
script>

这里主要是设置rem也就是视口的宽度，这样在设置宽度的时候，就可以使用

width:0.5rem

不用设置具体的值，也不用设置具体的百分比，这样相同的页面在不同的设备显示的时候，会根据不同设备的宽度来自动适配。

可以使用scss来动态实现px到rem的转换：

@function px( $px ){
@return $px/$designWidth*10 + rem;
}

$designWidth : 1440;

 

 

 

转载于:https://www.cnblogs.com/liubinsh/p/8689925.html