久久六月免费视频,91老女。精品五区

一、移動端視口

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

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

二、響應(yīng)式布局ui，非主流，一般按公司需要開發(fā)

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

image.png

設(shè)置根布局的font-Size ，優(yōu)點(diǎn)是可以根據(jù)設(shè)計(jì)稿尺寸寬度合理設(shè)置DESIGN_WIDTH進(jìn)行比較完美的適配

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

        //設(shè)計(jì)稿的寬度為375px，不同設(shè)計(jì)稿修改這個值
        const DESIGN_WIDTH = 375;

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

        //獲取并調(diào)整設(shè)備寬度
        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);

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

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

淘寶無限適配flexible.js源碼設(shè)置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))