移動端适配

文章目錄

• 移動端适配
• 一、移動端适配
• • 1.一些概念了解
  • 2，移動端适配的方案

一、移動端适配

1.一些概念了解

1.rem和em的差別

兩者都是相對機關，rem以html的font-size作為參照物設定标簽大小；em以父元素的font-size作為參照物設定标簽大小，這和百分比類似。是以em % vh vw它們更适合小範圍的使用，不适合大篇幅使用。

2.px為什麼不能進行适配？

px是css像素（邏輯分辨率），是前端的一個尺寸機關；實體像素，是由一個個的像素點構成的整個螢幕，每個螢幕的實體像素點是一定的。針對1px的css像素去覆寫占用的實體像素點，是動态變化的。當螢幕變大，也就是實體像素點變大了，這隻會導緻1px所占用的實體像素點減少；反之，則導緻1px所占用的實體像素點變多。然而！這就表示無論，螢幕大小怎麼變化，實體像素點怎麼變化，這跟px沒有任何關系！應該是50px的寬度，無論螢幕怎麼變大變小，永遠都是一樣的大小。是以這就是px不能進行适配的原因。

[email protected]媒體查詢 + rem可利用的插件

計算公式：html中font-size大小*rem機關的标簽大小=px機關的标簽大小

如果手動每次設定大小都自己計算，這太累了！vscode中有插件：px to rem & rpx (cssrem),在插件的擴充中，可以設定基準的font-size，以及css分辨率和規定螢幕寬度。

4，響應式頁面和移動端頁面差別

響應式頁面：頁面的布局結構(樣式等)會随着頁面大小的變化而變化。

移動端頁面：頁面元素的大小會随着手機尺寸大小的變化而變化，而布局樣式等不發生改變。

2，移動端适配的方案

1. 百分比機關：布局采用百分比的形式進行書寫。（缺點：每一級父元素都必須設定寬高）

2. vh和vw機關：vw（view width）/ vh (view height) , 它們始終都是以浏覽器的可視區域大小為參照物。視口（viewport）将整個浏覽器的寬度視為100vw，不管浏覽器有多寬，始終都是100vw。不管浏覽器有過高，始終都是100vh。是一個相對機關。。（缺點：始終需要以視窗作為參照物設定大小）

3. 彈性布局：利用彈性布局的時候可以對子元素進行縮放，是以這裡可以正常設定px機關

4. @media媒體查詢+rem組合：(常用)

1. html根标簽font-size機關px + @media媒體查詢 + rem：

<!-- 
    步驟：
    1. 将任意一個大小的手機螢幕尺寸，進行 20等份/15等份/10等份 的平分，比如  414px / 20 = font-size；375px / 20 = font-size；320px / 20 = font-size；
    2. 一般将 邏輯分辨率375px 對應的實體分辨率是750px 作為标準，這個尺寸下的參照物稱為設計稿；
    3. 将設計稿中标注的尺寸，轉化為rem機關；其他尺寸下，rem不變，但是font-size是動态變化的。根據動态變化的font-size以及rem，最終計算出來不同尺寸下元素的大小；
    -->
    @media screen and (max-width: 750px) {
        html {
          font-size: 37.5px;
        }
      }
      @media screen and (max-width: 720px) {
        html {
          font-size: 36px;
        }
      }
      @media screen and (max-width: 540px) {
        html {
          font-size: 27px;
        }
      }
      @media screen and (max-width: 480px) {
        html {
          font-size: 24px;
        }
      }
      @media screen and (max-width: 424px) {
        html {
          font-size: 21.2px;
        }
      }
      @media screen and (max-width: 414px) {
        html {
          font-size: 20.7px;
        }
      }
      @media screen and (max-width: 400px) {
        html {
          font-size: 20px;
        }
      }
      @media screen and (max-width: 384px) {
        html {
          font-size: 19.2px;
        }
      }
      @media screen and (max-width: 375px) {
        html {
          font-size: 18.75px;
        }
      }
      @media screen and (max-width: 360px) {
        html {
          font-size: 18px;
        }
      }
      @media screen and (max-width: 320px) {
        html {
          font-size: 16px;
        }
      }
           

1. html根标簽font-size機關vw + rem：

<!-- 
     <!-- 
    100vw: 和螢幕尺寸一樣寬
    設計稿螢幕邏輯像素375px，375px=100vw  1px=0.1333333vw
    設計稿中的100px*100px的尺寸大小：13.333vw*13.3333vw

    将html的font-size設定為vw機關: font-size: 13.3333vw

    兩個問題：
    1. font-size為什麼要設定為13.3333vw。
      将螢幕邏輯像素中的1px轉化為vw機關，計算公式：1px=100vw/螢幕邏輯像素。如果螢幕邏輯像素是375px,計算會得到1px=0.1333……vw,于是将标簽的px轉化為rem機關就太簡單了！
      将标簽px機關轉化為rem機關，計算公式：rem機關标簽大小=px機關标簽大小/html的font-size 。于是，1rem=1px/0.1333……vw  ===>也就是  1px/1rem=0.133……vw  ，這時候，如果标簽大小不是1px而是100px,對應rem就要擴大100倍，變成100rem,這種感覺就很麻煩，是以就可以回答問題2: 1px = 0.133333vw為什麼要乘以100px。
    2. 1px = 0.133333vw為什麼要乘以100px。
      為了讓100px對應為1rem,10px對應為0.1rem……(如果font-size不乘以100，100px對應為100rem,10px對應為10rem……)
    -->