移動端網頁怎麼做?

移動端網頁怎麼做?

移動端網頁最大的特點是什麼?自適應不同尺寸的螢幕!高大上的叫法:響應式!
知道了自適應網頁怎麼做豈不是能很好解決問題了?那麼自適應網頁怎麼做呢?網上關於這方面的文章有很多,我簡單的整理一下。

一、 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

二、CSS解決方案

解決思路

始終貫徹能用css解決的堅決不用js
那麼你想到了什麼?媒體查詢!@media 可以針對不同的螢幕尺寸設定不同的樣式!
有了 @media 根據 每一個尺寸的螢幕設計一套樣式表出來?!那豈不是寫到吐血
除了 @media,我們還需要rem來配合使用。
大家應該知道em 是相對於父級元素來設定字型大小的,而我們的rem是相對於根元素<html>的

步驟二、@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>的字型大小。而且只能寫區間。

三、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>的字型大小。完美收工!

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

解決思路

calc(): 用於動態計算長度值

vw:相對於視口的寬度。視口被均分為100單位的vw

一步到位:根據設計稿製作標準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 
}

說明:此解決方案僅適用於移動端支援calc和vw的瀏覽器