移動端網頁怎麼作？

時間 2019-12-06

標籤移動網頁怎麼欄目無線简体版

原文原文鏈接

移動端網頁最大的特色是什麼？ 自適應不一樣尺寸的屏幕！高大上的叫法:響應式！
知道了自適應網頁怎麼作豈不是能很好解決問題了？那麼自適應網頁怎麼作呢？網上關於這方面的文章有不少，我簡單的整理一下。

1、 HTML設置

在head中加入meta標籤

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

簡單解釋一下：
我規定： 頁面寬度＝屏幕寬度，初始縮放比例爲1，容許用戶最大和最小伸縮比都是1，不容許用戶手動縮放
深刻了解 [viewport]

2、CSS解決方案

解決思路

始終貫徹能用css解決的堅定不用js
那麼你想到了什麼？ 媒體查詢！@media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式！
有了 @media 根據每個尺寸的屏幕設計一套樣式表出來？！那豈不是寫到吐血
除了 @media，咱們還須要 [rem]來配合使用。
你們應該知道em 是相對於父級元素來設置字體大小的，而咱們的 rem 是相對於根元素<html>的。
這一點很重要。因此咱們只要在 @media 中設置不一樣屏幕尺寸的根元素<html>的字體大小便可。

步驟一：根據設計稿製做標準web頁

咱們以iPhone6兩倍設計稿標註來製做網頁。寬度爲750px 設置以下：

html,body {font-size:100px;}/* 規定 1rem = 100px;  * 咱們就能夠根據這個比例來設計製做出一套css樣式表佈局這個頁面，
 *這個頁面在寬度爲750px時就完美顯示了。例如：*/header {  width: 100%;            // 寬度還能夠結合百分百來使用  height: .98rem;         // 高度爲98px  border-radius: .49rem;  // 圓角爲49px  font-size: .24rem;      // 字體爲24px}複製代碼

步驟2、@media設置根元素的字體大小

重點來了，咱們只須要使用@media來設置不一樣屏幕尺寸的根元素的字體大小。主流設備設置以下：

複製代碼

@media only screen and (max-width:768px),only screen and (max-device-width:768px) {
    body,html {
        font-size: 104px;
    }
}
@media only screen and (max-width:750px),only screen and (max-device-width:750px) {
    body,html {
        font-size: 100px;
    }
}
@media only screen and (max-width:640px),only screen and (max-device-width:640px) {
    body,html {
        font-size: 85.33px;
    }
}
@media only screen and (max-width:600px),only screen and (max-device-width:600px) {
    body,html {
        font-size: 80px;
    }
}
@media only screen and (max-width:540px),only screen and (max-device-width:540px) {
    body,html {
        font-size: 72px;
    }
}
@media only screen and (max-width:480px),only screen and (max-device-width:480px) {
    body,html {
        font-size: 64px;
    }
}
@media only screen and (max-width:414px),only screen and (max-device-width:414px) {
    body,html {
        font-size: 55.2px;
    }
}
@media only screen and (max-width:412px),only screen and (max-device-width:412px) {
    body,html {
        font-size: 54.8px;
    }
}
@media only screen and (max-width:400px),only screen and (max-device-width:400px) {
    body,html {
        font-size: 53.33px;
    }
}
@media only screen and (max-width:375px),only screen and (max-device-width:375px) {
    body,html {
        font-size: 50px;
    }
}
@media only screen and (max-width:360px),only screen and (max-device-width:360px) {
    body,html {
        font-size: 47.8px;
    }
}
@media only screen and (max-width:320px),only screen and (max-device-width:320px) {
    body,html {
        font-size: 42.4px;
    }
}複製代碼

[各尺寸分辨率怎麼查看？] 請使用谷歌瀏覽器移動端模擬器

主流移動設備作到這一步基本完成，還有點不夠完美的地方就是這樣要寫不少種屏幕的根元素<html>的字體大小。並且只能寫區間。

3、JS解決方案

解決思路

css不能解決的問題仍是要用js來輔助
css只能設置某個區間的樣式，
js能夠動態獲取當前設備的屏幕寬度。根據當前屏幕寬度設置當前屏幕寬度下的根元素字體大小。

步驟一：根據設計稿製做標準web頁

同上css解決方案步驟一

步驟二： JS動態改變根元素字體大小

在頁面中引入下面js代碼

// JavaScript Document
(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
        if (clientWidth > 750) {
            docEl.style.fontSize = '100px';// 修正一下大於750的字體大小爲100px
        } else {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        }
      /*
       * 100 -> html,body {  font-size:100px; }
       * 750 -> 此處以 iPhone6 兩倍設計稿 寬度750px 佈局頁面
       * 根據具體狀況改變這兩個數值
       */
    };

  if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);複製代碼

不須要考慮有多少種設備分辨率什麼的。經過js自動獲取當前設備的clientWidth ，而後根據設計好的比例計算出根元素<html>的字體大小。完美收工！