高冷受做到失禁颤抖哭着求饶,久久精品亚洲一区二区三区浴池,日本五级伦理片

一、移動端視口

視口(viewport)：就是瀏覽器顯示頁面內容的屏幕區域。視口可以分為布局視口、視覺視
口和理想視口。我們要最終使用的是理想視口。
一般移動設備的瀏覽器都默認設置了一個布局視口，用于解決早期的 PC 端頁面在手機上顯示的問題。
iOS, Android 基本都將這個視口分辨率設置為 980px，所以 PC 上的網頁大多都能在手機上呈現，只不過元素看上去很小，一般默認可以通過手動縮放網頁。
現在市場常見的移動端web頁面通常有兩種，單獨制作移動端頁面和響應式頁面兩種方案。主流還是PC和移動端各自單獨制作一套頁面。

image.png

image.png

    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" />

image.png

二、響應式布局ui，非主流，一般按公司需要開發

響應式網站:即pc和移動端共用一套網站，只不過在不同寬度的屏幕下，樣式會自動適配。配合媒體查詢監聽，通過判斷屏幕寬度來改變樣式，以適應不同終端。例如：三星電子官網: www.samsung.com/cn/
缺點:制作麻煩，需要花很大精力去調兼容性問題

image.png

設置根布局的font-Size ，優點是可以根據設計稿尺寸寬度合理設置DESIGN_WIDTH進行比較完美的適配

; (function (doc, win) {
    if (doc==null||!doc.addEventListener) {
        return;
    }
    // 適配rem的js代碼函數，適用于移動web開發界面比例適配
    var supportsOrientationChange = "onorientationchange" in win ? "orientationchange" : "resize";
    var timeoutId;
    function setRem() {
        //設備寬度限制常量，用于適配最大寬度
        const MAX_CLIENT_WIDTH = 750;

        //設計稿的寬度為375px，不同設計稿修改這個值
        const DESIGN_WIDTH = 375;

        //也可以乘以其他值如50，但是為了好計算，一般設置為10或100，這樣，
        //我們只需要把設計稿寬度如 width=50px，除以10或100，改為5rem或0.5rem就好了。
        const UI_REM = 100;

        //獲取并調整設備寬度
        var clWidth = doc.documentElement.clientWidth;
        if (clWidth > MAX_CLIENT_WIDTH) {
            doc.documentElement.style.fontSize = "100px";
        } else {
            clWidth = clWidth >= MAX_CLIENT_WIDTH ? MAX_CLIENT_WIDTH : clWidth;

            console.log("clientWidth=" + clWidth);

            //最后設置html的 font-size= 移動設備 / 設計稿寬度 * 100  = 100px，那么 1rem = 100px
            const fontPX = (clWidth / DESIGN_WIDTH) * UI_REM;
            doc.documentElement.style.fontSize = fontPX + "px";
        }
    }
    console.log("初始化設置rem，" + supportsOrientationChange);
    setRem();//設置rem

    //supportsOrientationChange 變量用于判斷瀏覽器是否支持 orientationchange 事件，如果支持，
    //則使用該事件進行窗口大小的監聽，否則使用 resize 事件
    win.addEventListener(supportsOrientationChange, function () {
        try {
            console.log("監聽到變化");
            // 防抖延遲時間，節流函數，防止頁面頻繁刷新
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => {
                setRem();
            }, 300)
        } catch (error) {
            console.log(error)
        }
    }, false)
}(document, window))

淘寶無限適配flexible.js源碼設置font-Size

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))