移动端响应式布局

设备像素、设备独立像素、CSS像素、PPI、devicePixelRatio

设备像素（物理像素 / 像素分辨率）

• 显示器的最小物理单位（对于一个显示器来说是固定的）
• 以手机屏幕为例，iphonex 像素分辨率为 1125x2436，是指屏幕横向能显示1125个物理像素点，纵向能显示2436个物理像素点
• 通常说的 4K 显示屏指的是 4096x2160

设备独立像素（dips）

• 比如我们偶尔会说“电脑屏幕在 2560x1600分辨率下不适合玩游戏，我们把它调为 1440x900”，这里的“分辨率”（非严谨说法）指的就是设备独立像素
• 可在控制台通过 window.screen.width / window.screen.height 查看
• 另外，平时我们所说的 iphoneX 的逻辑分辨率 375 x 812 指的就是设备独立像素。chrome检查元素模拟调试手机设备时显示如 375x667 和 320x480 都是设备独立像素
• 一个设备独立像素可能包含多个物理像素，包含的越多，显示越清晰

设备的独立像素是和设备的分辨率相关联的，比如 IPhone6 的分辨率为 1334 * 750，那么表示该手机的屏幕上有 1366 * 750 个物理像素，而 Galaxy S5 的屏幕上有 1280*720 个像素。

CSS 像素 （1px css像素 = 1 设备独立像素 dips）

• 在页面不缩放的情况下，1px的 CSS像素 === 1设备独立像素
• 页面放大200%时，页面的设备独立像素依旧不变，放大的是CSS像素。但是此时CSS像素与设备独立像素的关系变化了，1px === 4独立像素（宽x2，高x2）
• CSS 中的像素是一个相对值，不是绝对值，因此1px 的 CSS 像素并不一定等于 1px 的物理像素。 需要注意的是，CSS 中的像素单位是抽象的，只是一种规范，最终的显示是取决于物理设备的。物理设备根据某种规则，决定该采用几个物理像素去显示 1px 的 CSS 像素，这个规则就是设备像素比。

PPI （表示每英寸所包含的像素点数目，数值越高，说明屏幕能以更高密度显示图像）

• 指每英寸的物理像素数。
• 以尺寸为5.8英寸（屏幕对角线长度）、分辨率为1125x2436的iphonex为例：
• ppi = Math.sqrt(1125*1125 + 2436*2436) / 5.8 ，值为 463ppi。（屏幕对角线上的像素点 / 对角线的英寸数）

devicePixelRatio （dpr 像素比）

设计稿的尺寸（物理尺寸） = dips(iphone6 375) * dpr (2) = 750

• 像素比 window.devicePixelRatio
• devicePixelRatio 指的是物理像素和设备独立像素的比，即1独立像素由多少物理像素渲染
• dpr（device pixel ratio）：设备像素比，设备像素 / 设备独立像素，代表设备独立像素到设备像素的转换关系，在JS中可以通过 window.devicePixelRatio 获取
• window.devicePixelRatio = 物理像素 / 设备独立像素（dips）
• 经计算， iphonex 的 devicePixelRatio 是 3

当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素；

当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素；

当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素；

layout viewport(布局视口) 与 visual viewport (视觉视口)

layout viewport（布局视口） visual viewport（视觉视口）和物理像素 ideal viewport（理想视口）和 dip （设备逻辑像素）

viewport 缩放适配

移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域

• width: 控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
• height: 和 width 相对应，指定高度
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
• maximum-scale：允许用户缩放到的最大比例
• minimum-scale：允许用户缩放到的最小比例
• user-scalable：用户是否可以手动缩放

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; 
maximum-scale=1.0; user-scalable=no;">

• 屏幕的尺寸：window.screen.width // 指设备独立像素值
• 浏览器窗口尺寸：window.innerWidth 、window.innerHeight // 指的是CSS像素
• 注：innerWidth innerHeight 不包括滚动条的宽度高度，精确计量用 document.documentElement.clientWidth 和 document.documentElement.clientHeight

媒体查询 @media (本质是样式覆盖)

语法: @media 媒体类型 逻辑操作符 (媒体属性) ｛样式代码｝

逻辑操作符

• and： 操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真

[@media](#) all and （min-width:700px）and （orientation: lanscape）{...}

• not：操作符用来对一条媒体查询的结果进行取反

[@media](#) not all  and （monochrome){...}  <=> [@media](#) not (all  and (monochrome)){...}

• only：操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

media = "only screen and（max-width：1000px)" {...}

<!-- 媒体查询语法  @rule   =>  @media -->
<div class="box"></div>

.box{
  width: 200px;
  height: 200px;
  background-color: gold;
}
/* 注意: 每个关键字之间用空格隔开  否则会失效 */
@media screen and (min-width:375px) {
  .box {
    background-color: green;
  }
}
/* screen 可以省略 */
@media (min-width: 414px) {
  .box {
    background-color: red;
  }
}

媒体属性

• width | min-width | max-width
• height | min-height | max-height
• device-width | min-device-width | max-device-width
• device-height | min-device-height | max-device-height
• aspect-ratio | min-aspect-ratio | max-aspect-ratio
• device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
• color | min-color | max-color
• color-index | min-color-index | max-color-index
• monochrome | min-monochrome | max-monochrome
• resolution | min-resolution | max-resolution
• scan | grid

横竖屏

@media (orientation: portrait) { 竖屏 }

@media (orientation: landscape) { 横屏 }

css常用的长度单位

• px （像素单位） 固定单位 写死常用语 PC 项目
• em 相对单位 参照父元素的字体的大小 （父元素 html时候1em = 16px）否则就跟着自己父元素的大小走
• % 相对单位 参照父元素的尺寸计算
• rem 相对单位 root element font-size html { font-size:16px; }
• vw 相对单位 viewport width 把视口大小分为100等分 1vw = 1/100 * 视口

vw 弹性适配

动态 rem 适配

html 字体大小默认是 font-size: 16px， 为了方便计算建议1rem = 100px

• 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
• 根元素html默认的 font-size 为 16px
• 为了方便计算，我们一般给父元素的 font-size 设置为100px

已苹果为例，条件如下:   
iphone5     320  
ihpone6     375 
iphone6P    414     
ipad        768
ipad pro    1024

320  <  x  <  375
375  <  x  <  414

以750设计稿为基准根据比例计算出 x 的值：

750设计稿    100px
320          x = font-size: 42.667px;

750设计稿    100px
375          x = font-size: 50px;

750设计稿    100px  
414          x = font-size: 55.2px;

750设计稿      100px
768           x = font-size: 102.4px;

第一种方式：媒体查询(参考网易移动端)

<div class="box">小铜钱</div>

.box {
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.34rem;
  background-color: olive;
}
html {
  /* font-size: 100px; */
  font-size: 13.33333vw;
}

@media screen and (max-width: 320px) {
  html {
    font-size: 42.667px;
    font-size:13.33333vw;
  }
}

@media screen and (min-width: 321px) and (max-width:360px) {
  html {
    font-size: 48px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 361px) and (max-width:375px) {
  html {
    font-size: 50px;
    font-size:13.33333vw;
  }
}

@media screen and (min-width: 376px) and (max-width:393px) {
  html {
    font-size: 52.4px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 394px) and (max-width:412px) {
  html {
    font-size: 54.93px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 413px) and (max-width:414px) {
  html {
    font-size: 55.2px;
    font-size:13.33333vw;
  }
}

@media screen and (min-width: 415px) and (max-width:480px) {
  html {
    font-size: 64px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 481px) and (max-width:540px) {
  html {
    font-size: 72px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 541px) and (max-width:640px) {
  html {
    font-size: 85.33px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 641px) and (max-width:720px) {
  html {
    font-size: 96px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 721px) and (max-width:768px) {
  html {
    font-size: 102.4px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 769px) {
  html {
    font-size: 102.4px;
    font-size: 13.33333vw
  }
}

移动端适配 rem & vw 计算工具

第二种方式：javascript 动态修改根节点的 fontSize

// 针对750的设计稿
function refreshRem() {
  var desW = 750,
  winW = document.documentElement.clientWidth,
  ratio = winW / desW;
  document.documentElement.style.fontSize = ratio * 100 + 'px';
}
refreshRem();
window.addEventListener('resize', refreshRem);

/*
 * 作者:helang
 * 邮箱:helang.love@qq.com
 * jQuery插件库:https://www.jq22.com/mem395541
 * CSDN博客:https://blog.csdn.net/u013350495 
 * 微信公众号:web-7258
 * rem计算方式：设计图尺寸px / 100 = 实际rem  【例: 100px = 1rem，32px = .32rem】
 */
!function (window) {
    /* 设计图文档宽度 */
    var docWidth = 750;
    var doc = window.document,
        docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var recalc = (function refreshRem () {
        var clientWidth = docEl.getBoundingClientRect().width;
        /* 8.55：小于320px不再缩小，11.2：大于420px不再放大 */
        docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px';
        return refreshRem;
    })();
    /* 添加倍屏标识，安卓为1 */
    docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);
    if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
        /* 添加IOS标识 */
        doc.documentElement.classList.add('ios');
        /* IOS8以上给html添加hairline样式，以便特殊处理 */
        if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
            doc.documentElement.classList.add('hairline');
    }
    if (!doc.addEventListener) return;
    window.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
}(window);

弹性 flex 适配

Flex 布局教程：语法篇

参考：

说说移动前端中 viewport （视口）