移动端适配基础

基础地址：简书地址

视频地址：B站简说

基础概念：

以iPhone6为样本

物理像素（分倍率）：屏幕的像素发光体 1334*750pt(高*宽）

屏幕尺寸：4.7英寸 为屏幕可用范围的对角线，1英寸=2.45cm

像素密度：一英寸所有的发光体个数 (（开根号）1334平方+75.平方)/4.7英寸 =326

设备独立像素：就是css中的px，这是虚假的像素，不是真实的

设置像素比：dpr，适用于移动端，就是缩放比例； DPR = 设备像素 / CSS像素

视图视口：手持设备物理屏幕的可视区域

布局视口：在移动端视口与移动端浏览器屏幕宽度不再相关联，可以单独设置它的宽高（主要是宽），这个视口就是HTML页面布局的区域，并且可以通过viewport meta标签控制。

这样就可以适配，屏幕变化之后就可以适配了

 <meta name="viewport" content="width=device-width">

适配方案：

文章地址：简书适配方案

视频地址：B站适配方法

1》百分比宽度+固定高度+弹性盒子

htm设置meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<style>
#header {
    /* 宽度默认不设置，就是100% */
    height: 45px;
    line-height: 45px;
    background-color: #00b38a;
    color: #fff;
    font-size: 1.8rem; /* 也可以根据媒体查询适当调整字体大小 */
    text-align: center;
    position: relative;
}
</style>
<div id="header"> </div>

2》rem+媒体查询

/* 媒体查询以@media开头，然后后面可以跟上 判断的条件，比如：screen表示屏幕设备, and是并且的意思， min-width是最小宽度的意思。 */
@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: 400px) {
    html {font-size: 62.5px;}
}
 
@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: 640px) {
    html {font-size: 100px;}
}

3》js动态绑定

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width = width < 320 ? 320 : width;
            width = width > 640 ? 640 : width;
            width && (docEle.style.fontSize = 100 * (width / 640) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

 4》vw（viewport width） 布局方案等

5》就目前工程实践来看，还是淘宝的flexible方案最靠谱，应用也最广泛。