像素理论、视口理论及移动端适配

时间 2019-12-09

标签像素理论论及移动适配栏目无线繁體版

原文原文链接

首先须要说明一点，css像素不等同于物理像素，css像素是一个抽象单位，而物理像素是实实在在，大小固定的像素点。

1、作移动端须要了解的四个像素

物理像素
物理像素的实际大小及个数由设备自己决定。javascript
设备独立像素
设备独立像素也是根据设备而定，生产出来就固定不变，iPhone6的设备独立像素是375 X 667。当你打开浏览器开发者模式，调成移动端就能够看到，它是css像素转换成最终物理像素的一个重要媒介。css
CSS像素
css像素浏览器上的概念，在没有作适配以前，它和实际物理尺寸扯不上半毛钱关系，css像素大小是随用户放大或缩小而改变的。最终转换成物理像素到设备上成像。html
位图像素
图片尺寸相关的像素单位，若是一个位图像素恰好放在一个物理像素上成像，那么这时的显示效果最好，若是一个位图像素交给多个物理像素来显示则会失真（放大），若是一个物理像素要塞下多个位图像素，则会锐化。

java

2、像素比

概念：在一个方向上（如X轴上）占满一块屏幕所须要的物理像素个数 / 所须要的设备独立像素个数
好，那么来算一下iPhone6的像素比：iPhone6的X轴上的物理像素个数为750 ，而iPhone6的X轴上的设备独立像素为375 ，因此像素比为750 / 375 = 2
浏览器
若是按面积来比就不是2了

app

3、视口

移动端是如何将PC端的站点放到屏幕里面显示而不产生横向滚动条的呢？

布局视口
布局视口的尺寸各浏览器厂商提供了一个默认值，它决定页面元素要不要换行，移动端缩放操做不影响布局视口，而PC端缩放会影响布局视口。

通常PC端页面960 css像素布局
视觉视口
视觉视口的实际面积其实就是屏幕大小，可是它的尺寸是会改变的，由于他的单位是CSS像素，当你放大页面，你屏幕上的CSS像素点面积逐渐变大，屏幕所能呈现的CSS像素个数逐渐变少，因此视觉视口的尺寸逐渐变小，不要以为这是谬论，你能够调用API取出视觉视口大小，当你一边放大页面，这个值一边变小。默认移动端的视觉视口是980CSS像素，这就意味着你移动端屏幕能够看到整张网页，视觉视口的做用就是为了要包住整张网页。字体
将布局视口的大小设置为设备独立像素的尺寸

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

4、缩放

用户缩放
用户缩放改变的是视觉视口，不会改变布局视口
系统缩放
系统缩放是指设置initial-scale=xx来进行缩放，系统缩放会改变布局视口和视觉视口

5、获取各视口宽度

布局视口

let width = document.documentElement.clientWidth

视觉视口

let width = window.innerWidth

6、设置完美视口

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,maximum-scale=1">

width=device-width 将布局视口尺寸设置为设备独立像素尺寸。
initial-scale=1 将缩放比设为1，并将布局视口和视觉视口尺寸设置为设备独立像素尺寸。
maximum-scale=1 maximum-scale=1 IOS不支持initial-scale，因此要设置最大缩放和最小缩放。
user-scalable=0 禁止用户缩放

7、适配

设置完完美视口就会产生一个问题：在不一样设备上元素的高宽比不同，由于不一样的设备布局视口大小不同，iPhone6为375 css单位 ，而iPhone6plus为414css单位，而你的代码写10px时，所占据的屏幕比例是不同的，因此就须要咱们作适配工做。

rem适配方案
rem适配的前提是已经设置了完美视口，已经将布局视口的宽度设置成了设备独立像素的宽度。而后将跟标签的font-size大小设置为布局视口的大小，或者布局视口的百分之多少，如布局视口的1 / 16 ，那么 16rem 就占据整个屏幕宽度，8rem就占据宽度的一半，全部设备上都同样。scala
一份最粗糙的rem适配代码

<!DOCTYPE html>
  <html>

  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,
      initial-scale=1,minimum-scale=1,user-scalable=0,maximum-scale=1">
      <title>菜鸟教程(runoob.com)</title>
      <style>
      * {
          margin: 0;
          padding: 0;
      }

      .re {
          width: 180px;
          height: 8em;
          background: #000;
      }
      </style>
  </head>

  <body>

      <div class="re"></div>

  </body>
  <script>
      // 将跟标签的字体大小设置为布局视口宽度
      var rSize = document.documentElement.clientWidth;
      console.log(rSize);
      // 获取跟标签
      var html = document.querySelector('html');
      html.style.fontSize = rSize/16+'px';

      // 以上代码会有一个问题：根标签的font-size有可能会被改变
      // 因此要加上!important

      let style = document.createElement("style")
      let rSize = document.documentElement.clientWidth/16
      // 16分之1的布局视口大小
      style.innerHTML = "html{ font-size: "+ rSize + "px!important }"
      document.head.appendChild(style)
  </script>
  </html>

viewport适配方案
viewport适配方案的思路是将布局视口的宽度设置为设计图的宽度，可是安卓手机是不容许直接设置布局视口宽度，因此就须要经过设置 initial-scale值来改变布局视口大小，这个值的大小为：设备独立像素 / 设计图位图像素设计
一份viewport适配方案代码

<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8">
        <!--  先将设备独立像素大小赋值给布局视口值，以后替换掉 -->
        <!--  由于js暂时无法直接读取设备独立像素 -->
        <meta name="viewport" content="width=device-width>
        <title>菜鸟教程(runoob.com)</title>
        <style>
        * {
            margin: 0;
            padding: 0;
        }

        .re {
            width: 180px;
            height: 8em;
            background: #000;
        }
        </style>
    </head>

    <body>

        <div class="re"></div>

    </body>
    <script>
        var target = 375;
        var scale = document.documentElement.clientWidth/target;
        console.log(scale)
        var meta = document.querySelector("meta[name='viewport']")
        meta.content = "initial-scale="+scale+",minimum-scale="+scale+",user-scalable=0,maximum-scale="+scale
    </script>
    </html>