移動端適配方案

時間 2021-08-14

標籤 html 瀏覽器 dom ide 佈局測試設計 code htm 對象欄目無線简体版

原文原文鏈接

爲何要作移動端適配？html
- 咱們開發使用px（CSS pixel）的是邏輯像素，以致於在不一樣分辨率的設備上同一個UI設計圖展現效果會被伸縮變形，因此須要作移動端適配
經過歷史進程進一步認識！瀏覽器
- 早期諾基亞板磚機時代，樣式直男單1、設備少（哪一種設備須要即去從新開發一套便可），此時的設備像素比被通俗地固定在1（分辨率：物理像素/發光點），當後續各式尺寸、各式屏幕大小出現，但願能經過一套代碼自適應不一樣設備（摸魚就是第一輩子產力）
  偉大的喬布斯提出了retina display 視網膜屏能夠多個物理像素（2*2）構成一個邏輯像素。因此接下來針對不一樣分辨率的設備，均可以經過處理設備像素比達到統一邏輯像素分辨率

rem、vw、vh：（等比例縮放）

1 rem = 1 * ducument.ducumentElement.style.fontSize 大多數瀏覽器默認爲 HTML標籤 font-size 爲 16 pxdom

// 進行一個監聽配置
(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';   // 核心代碼，這裏的值能夠自定義設置
    };
   
    if (!doc.addEventListener) return;
       win.addEventListener(resizeEvt, recalc, false);
       doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

<meta name="viewport" content="width=device-width, initial-scale=1.0"> width能夠設置定值，調整initial-scale控制縮放比例ide

vw、vh佈局

1vw = width * 1% 1vh = height * 1% （這裏都是視圖寬高）測試

百分比佈局方案

距離寫百分比 width : 80%;設計

vh、vw講解code

px （像素 Pixel ）

物理像素：屏幕上的真實可顯示的像素點(每個點可單獨顯示各類顏色，不可在分割)

邏輯像素：2px ==2邏輯像素長度，至關於對物理像素點作了一個抽離、壓縮

設備像素比：物理像素/邏輯像素

----------------------------------------分隔線------------------------------------------------------------------htm

瀏覽器根元素/html的font-size 默認是 16px

px 相對邏輯像素長度，寫完了就會固定

因爲相對於邏輯分辨率 那邏輯分辨率變化就會引發差錯

em 相對當前dom對象的font-size屬性，如無則尋找最近的有font-size的父元素

依賴當前dom元素或父元素的font-size 一旦須要調整，找父元素的font-size很麻煩

rem 相對於根html（html文件最外層的html標籤）元素的font-size屬性

需考慮總體

----------------------------------------分隔線------------------------------------------------------------------對象

代碼測試

html {
    font-size: 10px;
  }
  #t1 {
    width: 90px;
    height: 50px;
    background-color: crimson; }
  #t2 {
    font-size: 5px;
    width: 10em;
    height: 10em;
    background-color: darkred;
    margin-left: 2em;}
  #t3 {
    font-size: 50px;
    padding-top: 2rem;
    width: 6rem;
    height: 6rem;
    border: 1px solid black;
  }
  #t4 {
    width: 100%;
    height: 100%;
    background-color: darkblue;}
</style>
<body>
  <div id="t1"></div>
  <div id="t2"></div>
  <div id="t3">
    <div id="t4"></div>
  </div>

vw\vh都是相對於視口

桌面端：瀏覽器的可視區域(winow.innerHeight)

移動端： Viewport中的Layout Viewport

vw：1vw等於視口寬度的1%

vh：1vh等於視口高度的1%

vmin：選取vw和vh中最小的那個

vmax：選取vw和vh中最大的那個

----------------------------------------分隔線------------------------------------------------------------------

代碼測試

#t5 {
    width: 10vw;
    height: 10vh;
    background-color: darkslateblue;}
  #t6 {
    width: 10vmax;
    height: 10vmin;
    background-color: darkturquoise;}
  <div id="t5"></div>
  <div id="t6"></div>
  <script>
    console.log(window.innerHeight);    
  </script>