移動端網頁怎麼作？

時間 2019-11-10

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

原文原文鏈接

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

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，不容許用戶手動縮放」
深刻了解 viewporthtml

2、CSS解決方案

解決思路

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

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

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

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能夠動態獲取當前設備的屏幕寬度。根據當前屏幕寬度設置當前屏幕寬度下的根元素字體大小。ui

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

同上css解決方案步驟一spa

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

在頁面中引入下面js代碼scala

// 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>的字體大小。完美收工！

4、calc()+vw解決方案 --(更新於2017-12-20)

解決思路

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

咱們以iPhone6兩倍設計稿標註來製做一個按鈕。
寬:402px
高:105px
距離底部:60px
水平居中

css設置以下：

html,body {font-size:calc( 100vw / 7.5 )}
/* 
 * 同理 根據你的設計稿，寬度爲640px的：font-size:calc( 100vw / 6.4 )
 * 規定 1rem = 100px*; 這樣只是爲了方便計算
 * 咱們就能夠根據這個比例來設計製做出一套css樣式表佈局這個頁面，例如：
*/
 .btn{
    position: absolute;
    bottom: 0.6rem; // 0.6 = 60/100 
    left:50%;
    margin-left: -2.01rem;
    width:4.02rem;  // 4.02 = 402/100 
    height: 1.05rem; // 1.05 = 105/100 
 }

/*
 * 假設你原有的項目中已經設置了在iPhone 6 的時候 1rem 表明 20px
 * css設置以下便可
*/
 html,body {font-size:calc( 100vw / 18.75 )}；
 .btn{
    position: absolute;
    bottom: 1.5rem         // 1.5 = (60/20)/2 
    left:50%; 
    margin-left: -5.025rem; 
    width:10.05rem;        // 10.05 = (402/20)/2 
    height: 2.625rem;     // 2.625 = (105/20)/2 
 }