像素理論、視口理論及移動端適配

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。