屏幕自適應

屏幕自適應

介紹

解決移動端複雜的顯示屏幕致使網頁呈現不一樣的顯示問題

方法

詳情參考標籤

<meta name="viewport" content="width=device-width,initial-scale=1.0">
複製代碼

屬性名	取值	描述
width	正整數 或 device-width	定義視口的寬度，單位爲像素
height	正整數 或 device-height	設置layout viewport 的高度，這個屬性對咱們並不重要，不多使用
initial-scale	[0.0-10.0]	設置頁面的初始縮放值，爲一個數字，能夠帶小數
minimum-scale	[0.0-10.0]	容許用戶的最小縮放值，爲一個數字，能夠帶小數
maximum-scale	[0.0-10.0]	容許用戶的最大縮放值，爲一個數字，能夠帶小數
user-scalable	yes/no	是否容許用戶進行縮放，值爲"no"或"yes", no 表明不容許，yes表明容許

針對多屏幕版本使用，經過js一次性定義

<script type="text/javascript">
  ((doc,win) => {
    var width1 = 320, userScalable = 'yes', maximumScale = 2 // 設置最優顯示屏幕寬度、是否容許縮放操做['yes','no']、設置基礎放大倍數
    var body = doc.documentElement,width = body.clientWidth
    var recalc = () => {
      var initialScale = width1 / width
      document.getElementsByTagName('meta').viewport.content = 'width=device-width, initial-scale=' + initialScale + ', maximum-scale=' + (maximumScale * initialScale) + ', user-scalable=' + userScalable
    }
    recalc()
    win.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', recalc, false);
  })(document,window)
</script>
複製代碼

css3 rem

rem是CSS3新增的一個相對單位，使用rem爲元素設定字體大小時，是相對大小，但相對的只是HTML根元素。經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。

目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

默認html的font-size是16px，即1rem=16px，若是某div寬度爲32px你能夠設爲2rem。

具體不一樣屏幕下的規則定義，即基數的定義方式：能夠經過CSS定義，不一樣寬度範圍裏定義不一樣的基數值(結合媒體查詢)，固然也能夠經過js一次定義。方法以下：

<script type="text/javascript">
  ((doc,win) => {
    var width = 2208 /** 設置最優顯示寬度 */, recalc = (a) => {
      var initialScale = win.screen.availWidth / width, fontSize = initialScale.toFixed(6) * 100
      doc.documentElement.style.fontSize = fontSize + 'px'
    }
    recalc()
    win['orientationchange' in window ? 'onorientationchange' : 'onresize'] = recalc
  })(document,window)
</script>
複製代碼

使用媒體查詢

媒體查詢也是css3的方法，其功能就是爲不一樣的媒體設置不一樣的css樣式，這裏的「媒體」包括頁面尺寸，設備屏幕尺寸等。

例如：若是瀏覽器窗口小於 500px, 背景將變爲淺藍色：

@media only screen and (max-width: 500px) {
  body {
    background-color: lightblue;
  }
}
複製代碼

使用百分比

詳情參考css->position 佈局