移动端适配布局(设备像素,独立像素和css像素的区别,以及自适应适配方案)

移动适配布局

1. 像素

1.1 设备像素

1. 显示器的最小物理单位(显示器是固定的).
2. 以手机屏幕为列,设备像素是真实的像素点,以iPhone 6/7/8高清屏为列,它的设备像素是750*1334.
3. 通常说的4K显示屏指的是4096*2160.
4. 我们通常说的手机分辨率是根号下手机宽度^2 +手机高度^2

1.2 设备独立像素

1. 设备独立像素就是出厂时的像素,可以通过
   window.screen.width
window.screen.height

2. 以手机屏幕为列,设备独立像素是规定的像素点,以iPhone 6/7/8高清屏为列,它的设备像素是375*667.

1.3 css像素

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

1.4 PPI

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

1.5 devicePixelRatio设备像素比(dpr)

1. devicePixelRatio指的是设备像素和设备独立像素的比,即1独立像素由多少物理像素渲染.
   window.devicePixelRatio = 物理像素/独立像素

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

因为不同设备具有不同的dpr 所以,css1px 所代表的设备像素不同, 所以在有些设备上看到的粗,有些设备看到的细,解决一像素边框问题.
方法一
通过媒体查询,查询设备的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.333333px solid blue }
}

缺点: 小数像素目前兼容性较差，一些以前的版本可能不支持。(理论上最小的单位是 1px。 所以会出现有的设备写 0.5px 无效（没有边框）的情况。)
方法二
借助伪元素缩放处理.

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

方法三

借助媒体查询和伪元素缩放来解决(可以用less来写)

// 定义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 什么是视口

1. 在移动端viewport视口就是浏览器显示页面内容的屏幕区域,在viewport中有两种视口,分别表示为 : visual viewport (可视视口) 和 layout viewport (布局视口),两个视口是叠加在一起的.
2. visual viewport 固定大小跟屏幕大小相同, 可以通过window.innerWidth来获取.
3. layout viewport 可改变大小, 默认大小为980像素, 可以通过document.documentElement.clientWidth获取
4. 视口默认的宽度是980px,我们可以用meta标签来束缚视口宽度.

2.2 视口设置

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

取值	含义
width	设置layout view的宽度为特定值 device-width表示设备的宽度
height	设置layout view的宽度为特定值,一般不设置
initial-scale	设置页面初始缩放
minimum-scale	设置页面最小缩放
maximum-scale	设置页面最大缩放
user–scalable	设设置页面能否缩放

3. 适配

3.1为什么要适配

1. 了适应各种移动端设备，完美呈现应有的布局效果
2. 各个移动端设备，分辨率大小不一致，网页想铺满整个屏幕，并在各种分辨下等比缩放.

现在主流的开发思路

1. PC端 和移动端 分开开发
2. 如果想在既能适应PC、又能适应移动端 响应式开发.

3.2 自适应适配方案

3.2.1 em,rem,vw/wh(单位认识)

1. em: 相对单位, 1em等于当前元素的font-size值的1倍.
2. rem 相对单位 r -> root 根节点( html ) 根据html的字体大小计算其他元素尺寸 1rem 就是html的font-size值
3. vw/vh ; 把屏幕(即浏览器可视区域)分为100份, 1vw就等于屏幕宽度的1%.

3.2.2 媒体查询

meida queries的方式可以说是早期采用的布局方式，它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：

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

优点

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

缺点

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

3.2.3 百分比与Flex布局

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

1. 局盒子采用百分比.
2. 容器盒子与文字采用固定大小.
3. 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);
})()

3.3 通过vw设置 html 字体

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

html{
    font-size:26.6666667vw;
}

如果切换到iphone 6plus 1vw = 4.41px

注意, 要给body重置一下font-size: 16px;

3.4 固比固

三栏布局,

利用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-color: blue;
    padding:0 60px;
    box-sizing:border-box;
}
#box .right{
    position: absolute;
    top: 0;
    right: 0;
    width:60px;
    height: 100%;
    background-color: 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.1 置高度按比例变换

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';

http://www.cnblogs.com/2050/p/3877280.htmlviewport 解析 meta解析
https://gs.statcounter.com/browser-market-share浏览器使用占比

本文地址：https://blog.csdn.net/weixin_46032850/article/details/107290686