屏幕适配是挪动端开辟中不可避免的一个题目，也是前端职员必需相识清晰的一个题目。

相识挪动端的学问

viewport
viewport是用户网页的可视地区。手机浏览器是把页面放在一个假造的”窗口”（viewport）中，一般这个假造的”窗口”（viewport）比屏幕宽，如许就不必把每一个网页挤到很小的窗口中（如许会损坏没有针对手机浏览器优化的网页的规划），用户能够经由过程平移和缩放来看网页的差别部份。
像素
css中的像素只是一个笼统的单元，初期的手机屏幕像素密度较低，一个css像素等于一个物理像素。然则跟着手机的屏幕像素密度越来越高，比方Retina，雷同的手机尺寸，分辨率却提高了一倍，这就意味着一样大小的屏幕上，像素多了一倍，这时刻一个css像素是等于两个物理像素的。
在挪动端浏览器中，window对象有一个dpr属性(装备物理像素和装备自力像素的比例)，也就是说dpr=物理像素/自力像素，所以在Retina屏幕中，dpr=2，看图措辞。

meta
在挪动端开辟时，我们须要在头部加上一句<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width：掌握viewport的大小，能够指定的一个值或许特别的值，如device-width为装备的宽度（单元为缩放为100%时的CSS像素）。

• height：和width相对应，指定高度。

• initial-scale：初始缩放比例，也等于当页面第一次load的时刻缩放比例。

• maximum-scale：许可用户缩放到的最大比例。

• minimum-scale：许可用户缩放到的最小比例。

• user-scalable：用户是不是能够手动缩放。

挪动端适配的几种计划

rem
rem是指相对于根元素的字体大小的单元，我们能够经由过程设置html的字体大小就能够掌握rem的大小。
须要注重的是，字体的大小不要用rem，我们能够依据差别的dpr做响应的处置惩罚。
要领一
能够用css3的媒体查询@media，这类要领能够适配大部份机型。

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

要领二
想要完成多终端适配，这里引荐手淘团队的lib-flexible库，详细完成要领能够参考https://github.com/amfe/artic…
要领三
css3的新单元vw，vh。1vw等于可视区宽度(屏幕的可视地区即规划地区)的百分之一，1vh等于可视区高度的百分之一。惋惜这个单元现在另有许多浏览器不支持。

现在我晓得的要领就这几个，假如另有愿望人人补充。