移动适配布局

1.像素相关

1.1 设备像素（物理像素）

1.显示器的最小物理单位（对于一个显示器来说是固定的）
2.以手机屏幕为例，屏幕上的真实像素点。iphone6 的设备像素 750 * 1334
3.通常说的4k显示屏指的是4096×2160

1.2 设备独立像素（独立像素）

1.通常通过window.screen.width/window.screen.height查看。
2.操作系统定义的长度单位。iPhone的设备独立像素。

1.3 CSS像素

1.CSS中的长度的单位，在CSS中使用的px都是只CSS像素。
2.在页面不缩放的情况下。1px的CSS像素===1设备独立像素。
3.页面放大200%时，页面的设备独立像素依旧不变，放的的是CSS像素，但此时的CSS像素与设备独立像素的关系变化了，1px === 4独立像素（宽×2，高×2）

1.4 PPI

1.指每英寸的物理像素数
2.以尺寸为5.8英寸（屏幕对角线长度）屏幕对角线上的像素点/对角线的英寸数

1.5 devicePixelRatio 设备像素比（dpr）

1.devicePixelRatio指的是物理像素和设备独立像素的比即1独立像素由多少物理像素渲染。
2.window.devicePixelRatio 可查看
3.window.devicePixelRatio = 物理像素 / 独立像素

1.6解决移动端1像素的问题

因为不同设备具有不同的drp，所以css 1px所代表的设备像素不同，所以在有些设备上看到的粗，有些设备看到的细，如何解决一像素边框问题。

方法一：
通过媒体查询，查询设备的dpr，根据dpr设置不同的宽度大小

   #box{
        height: 200px;
        border-bottom: 1px solid red;
    }

    @media screen  and(-webkit-min-device-pixel-ratio: 2) {
        #box{
            border-bottom: 0.5px solid #999;
        }
    }

    @media  screen and (-webkit-min-device-pixel-ratio: 3)  {
        #box{
            border-bottom: 0.3333px solid blue ;
        }
    }

缺点:小数像素目前兼容性较差,一些以前的版本不支持.
理论上最小的单位是 1px. 所以会出现有的设备写0.5px无效(没有边框)的情况.

方法二:
借助伪元素缩放处理

.button:after{
    content: "";
    display: block;
    height: 0;
    border-top: #999 solid 1px;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transform: scaleY(0.5); /*将1px的线条缩小为原来的50%*/
}

缺点: 不是所有设备的dpr都是2 所以固定缩放0.5 也会有问题

方法三:
借助媒体查询和伪元素来解决

// 定义mixin
.border-1px(@color: rgba(7,17,27,0.2)){
    position:relative;
    &:after{
        display:block;
        position:absolute;
        left:0;
        bottom:0;
        content:'';
        width:100%;
        border-top:1px solid @color;
    }
}

// 根据不同的dpr 使用不同的缩放
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
    .border-1px {
        .border-1px;
        &:after {
            -webkit-transform: scaleY(0.7);
            -moz-transform: scaleY(0.7);
            -ms-transform: scaleY(0.7);
            -o-transform: scaleY(0.7);
            transform: scaleY(0.7);
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
    .border-1px {
        .border-1px;
        &:after {
            -webkit-transform: scaleY(0.5);
            -moz-transform: scaleY(0.5);
            -ms-transform: scaleY(0.5);
            -o-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    .border-1px {
        .border-1px;
        &:after {
            -webkit-transform: scaleY(0.3);
            -moz-transform: scaleY(0.3);
            -ms-transform: scaleY(0.3);
            -o-transform: scaleY(0.3);
            transform: scaleY(0.3);
        }
    }
}

2.viewport

2.1 什么是视口

通过标签进行设置,name属性指定viewport的值,content属性进行视口配置

取值	含义
width	设置layout view(布局视图)的宽度为特定值 device-width表示设备的宽度
height	设置layout view 的宽度为特定值一般不设置
initial-scale	设置页面初始缩放
minmum	设置页面最小缩放
maximun	设置页面的最大缩放
user-scale	设置页面的最大缩放

3.适配

3.1 为什么要是配

a) 为了适应各种移动端设备,完美呈现应有的布局效果
b) 各个移动端设备,分辨率大小不一致,页面想铺满整个屏幕,并在各种分辨下等比缩放

现在主流的开发思路
1.PC端和移动端分开开发
2.如果想既能适应PC,又能适应移动端响应式开发(麻烦写好多套css)

3.2 自适应适配方案(布局方案)

3.2.1 先了解一些单位

em:相对单位 1em等于当前元素的font-size值
rem 相对单位 r -> root根节点(html)根据html字体大小设计其他元素尺寸
1rem 就是html的font-size值
vw/vh:吧屏幕分为100份,1vw就等于平米宽度的1%

3.2.2 媒体查询

media queries的方式可以说是早期用的布局方式,他主要是通过查询设备的宽度来执行不同的css代码,最终达到界面的配置.核心语法是:

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/
}

优点

方法简单,成本低,特别是对移动和PC维护同一套代码的时候
调整屏幕宽度的时候不用刷新页面即可响应式展示

缺点

代码量比较大,维护不方便
为了兼顾大屏幕或高清设备,会在成其他设备资源浪费,特别是加载图片资源
为了兼顾移动端和PC端各自响应式的展示效果,难免会损失个子特有的交互方式

3.2.3百分比与Flex布局

布局的特性:关键元素高度和位置都不变,只有容器元素在伸缩变换
这种布局是一种典型的弹性布局

布局的方式:

布局盒子采用百分比
容器盒子与文字采用固定大小
Flex确定位置(也可以采用浮动)

优缺点:

1.好处:大屏下可以展示更多的内容
2.坏处:宽屏下比例会比较不协调

注意: 这种情况下css尺寸单位用px就好,不要用rem,避免增加复杂度

3.2.4 rem布局

布局的特性:关键元素盒子大小与文字都随着屏幕大小不同,而展示不同的大小

布局方式:

1.根据屏幕大小不同设置html不同的字体大小
2.所有的盒子尺寸和文字大小采用rem布局方式

动态设置font-size

设置方式

var fontSize= document.documentElement.clientWidth /3.75
document.documentElement.style.fontSize = fontSize + 'px'

字体也可以不使用rem单位(通常也不建议字体用rem单位),采用不同的媒体方式

@media screen and (max-width:321px){
    .basesize{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .basesize{font-size:16px}
}

@media screen and (min-width:400px){
    .basesize{font-size:18px}
}

如果值是希望盒子根据屏幕大小不同而改变,可以在body重新固定文字大小

body{
        font-size:16px;
}

3.2.5 缩放布局

固定高度宽度,文字大小通过改变缩放比例适配
根据屏幕的分辨率动态设置适配缩放比例,达到等比缩放的功能

根据dpr来设置不同viewport缩放比例

// 改变视口的缩放比例
(function(){
    // 方法一
    var width = window.screen.width;
    var fixedW = 375;
    var scale = width / fixedW;
    var meta = document.createElement('meta');
    meta.setAttribute('name','viewport');
    meta.setAttribute('content',`width=${fixedW},initial-scale=${scale},minimun-sacle=${scale},maximun-scale=${scale},user-scalable=no`);
    document.head.appendChild(meta);
})()

如果是double设计图

// 改变视口的缩放比例
(function(){
    // 方法一
    var width = window.screen.width;
    var fixedW = 375;
    var scale = width / fixedW * 0.5;
    var meta = document.createElement('meta');
    meta.setAttribute('name','viewport');
    meta.setAttribute('content',`width=${fixedW},initial-scale=${scale},minimun-sacle=${scale},maximun-scale=${scale},user-scalable=no`);
    document.head.appendChild(meta);
    
})()

3.3通过vw设置html字体

以iphone6为例375px=100vw 1vw=3.75
如果我设置html的字体大小是100px

htl{
  font-size:26.666667vw
}

如果切换到iphone 6plus 1vw = 4.41px
注意要给body重置一下font-size:16px;

3.4 其他小技巧

3.4.1 固定比

三栏布局

利用box-sizing

#box{
  position:relative;
  width:100%;
  height:60px;
}
#box .left{
  position:absolute;
  top:0;
  left:0;
  width:60px;
  height:100%;
  background-color:red;
}
#box .content{
  width:100%;
  height:100%;
  background:blue;
  padding:0 60px;
  box-sizing:border-box;
}
#box .right{
  position:absolute;
  top:0;
  right:0;
  width:60px;
  height:100%;
  background:yellow;
}

利用flex

#box{
    width: 100%;
    height: 60px;
    display:flex;
}
#box .left{
    width:60px;
    height: 100%;
    background-color: red;
}
#box .content{
    flex:1;
    height: 100%;
    background-color: blue;
}
#box .right{
    width:60px;
    height: 100%;
    background-color: yellow;
}

3.4.2 设置高度按比例变换

1.不设置高度

不设置高度,图片宽度100%,高度默认按比例缩放

2.采用padding-top给盒子设置自动,然后用背景图

借用padding-top来处理,我们知道padding也可以显示背景

width:60%;
height:0;
padding-top:60%;

padding-bottom也可以,但是padding-top更好一点,overflow:hidden;隐藏超出的部分

3.通过js

var boxWidth = parseInt(getComputedStyle(box)['width']);
box.style.height = boxWidth+'px'