简要介绍: 介绍几种不同的自适应解决方案

# px 和 视口
# 媒体查询
# 百分比
# 自适应场景下的rem解决方案
# 通过vw/vh来实现自适应

# 一、px 和视口

# 1. 像素

px 分为：

css 像素： js 中或者 css 中使用的是 css 像素
物理像素与设备或者硬件相关

# 2. 视口

广义上是浏览器显示内容的屏幕区域。狭义上包括了布局视口视觉视口理想（布局）视口视口分类：

布局视口
视觉视口
理想（布局）视口

布局视口（layout viewport）定义 pc 在移动端的默认布局行为。 pc 的分辨率比较大，布局视口默认为 980px 也就是说在不设置网页的 viewPort 的情况下，pc 端的网页默认会以布局视口为基准，在移动端进行展示，因此可以看出明显的模糊。 2）视觉视口（visual viewport）视图视口表示浏览器内看到的网站的显示区域。用户可以通过缩放来查看网页的显示内容。视觉视口仅仅类似于放大镜中显示的内容。 3）理想视口 !! 在移动端中就是指设备的分辨率。换句话说就是，给定设备物理像素的情况下，最佳“布局视口”

DPR 的概念： device pixel ratio (物理像素比)

DPR = 物理像素/分辨率
越小越清晰

在不缩放的情况下，一个 css 像素对应一个 dpr 在移动端布局

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

# 3.px 与自适应

在 pc 的布局视口通常是 980px 假设有一个 750 * 1134 设计搞

//pc
 css像素 =750/980=0.76

//iphone6
css像素 = 750/350 = 2

对于不同分辨率的设备计算出的 css 像素是不同的。仅用 px 无法通过一套样式，实现各端的自适应。

# 二、媒体查询

多套样式缺点：写多套样式太繁琐

@media screen and (max-width: 960px) {
  body: {
    bgc: red;
  }
}
@media screen and (max-width: 750px) {
  body: {
    bgc: red;
  }
}
@media screen and (max-width: 320px) {
  body: {
    bgc: red;
  }
}

# 三、百分比

1：css 中子元素% 到底是谁的 %? height、width 很直观是相对父元素。但是 margin、padding、border、border-radius、translate 呢?

子元素宽高%
top left ... % top 相对父元素(不为 static)的 height left 相对父元素(不为 static)的 width

3)padding 无论上下左右，相对于父元素的width

4)margin 同上

5)border-radius 相对自身width

2.百分比单位布局应用

4:3 长方形
.trangle {
  height:0;
  width:100%
  padding:75%;
}

3.百分比单位缺点 1）计算复杂 2）根据父级别来写，复杂

# 四、自适应场景下 rem 解决方案

rem 单位

1rem = 16px

为计算方便 我们修改html的font-Size:10px
使得 1rem=10px;
html {
font-size:62.5%;
}

rem 来实现响应式布局

function refresh(){
  var doc = window
  var width =doc.innerWidth
  var design=1200
  if(width<750>) {
    design=640
  }else if(width<design>)
  {
    width-=80
  }else {
    width=design
  }
  var fontsize= width/design*100 + 'px'
}
 window.addEventListener('resize',refresh)

rem2px px2rem 原理：预处理css文件将px转rem

1）webpack loader

px2rem 
npm i px2rem-loader

modules:{
  rule:[
    {
      test:/.\css$/,
      loader:[{
        loader:'style-loader'
      },
      {
        loader:'css-loader'
      },
      {
        loader:'px2rem-loader',
        options:{
          remUni:75,
          remPrecision:8
        }
      },
      ]
    }
  ]
}

2）webpack plugin

npm install postcss-loader

rem缺点 js和css耦合（通过控制根元素的font-size）

# 五、vh和vw

解释

css3的属性
相对视口的宽高
更是理想百分比的单位

 window.innerWidth //900
 {
   font-size:10vw; //90
 }

vw转换

//如iphone 375*667分辨率
1px = 1/375 * 100 vw;
1vw = 375/100

← Css知识