NO IMAGE

手機端頁面介紹

雖然不完全是我寫的,但這是我綜合了部落格,百度,資料整理得出的結果-^-^-

可以根據情況引入

常用的快捷縮寫,根據個人習慣來,僅供參考
透明:transparent

.clear{zoom:1;}
.clear:after{content:''; display:block; clear:both;}
.fl{float:left;}
.fr{float:right;}
.viewport{max-width:640px; margin:0 auto; overflow-x:hidden;}
.bdc{border:1px solid #FAB702;}
.in-block{display:inline-block;}
.por{position: relative; }
.poa{position: absolute; }

媒體查詢參考下就好,JavaScript取代了這個,下面會有介紹

@media only screen and (min-width: 401px){html {font-size: 25px !important;}}
@media only screen and (min-width: 428px){html {font-size: 26.75px !important;}}
@media only screen and (min-width: 481px){html {font-size: 30px !important; }}
@media only screen and (min-width: 569px){html {font-size: 35px !important; }}
@media only screen and (min-width: 641px){html {font-size: 40px !important; }}

禁止文字被選中

html, body {-webkit-user-select: none;user-select: none;}

通過關鍵字可搜尋到該頁面

<meta name="keywords" content="電影網站"/>

網頁描述

<meta name="description" content="電影,視訊,音樂" />

網頁左上角小logo

<link rel="shortcut icon" type="image/x-icon" href="" media="screen" />

3s後跳轉,記住寫法哦

<meta http-equiv="refresh" content="3 url=https://www.baidu.com/" />

每3s重新整理一次頁面

<meta http-equiv="refresh" content="3" />

描述,標註下,例如:誰什麼時候寫的頁面之類的,這個屬性不會在網站上顯示出來的,只存在於原始碼中。

<meta name="author" content="冷冷,2017-11-22" />

主要檔案

<!DOCTYPE HTML>
<html>
<head>
<!--宣告當前頁面的編碼-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>移動端開發模板</title>
<!--通過關鍵字可搜尋到該頁面-->
<meta name="keywords" content="" />
<!--網頁描述-->
<meta name="description" content="" />
<!--解決瀏覽器相容問題-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適配當前螢幕-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<!--禁止自動識別電話號碼-->
<meta name="format-detection" content="telephone=no" />
<!--禁止自動識別郵箱-->
<meta content="email=no" name="format-detection" />
<!--iphone中safari私有meta標籤,允許全屏模式瀏覽,隱藏瀏覽器導航欄-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--iphone中safari頂端的狀態條的樣式black(黑色)-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
! function(e) {
function t(a) {
if (i[a]) return i[a].exports;
var n = i[a] = {
exports: {},
id: a,
loaded: !1
};
return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
}
var i = {};
return t.m = e, t.c = i, t.p = "", t(0)
}([function(e, t) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
});
var i = window;
t["default"] = i.flex = function(normal, e, t) {
var a = e || 100,
n = t || 1,
r = i.document,
o = navigator.userAgent,
d = o.match(/Android[\S\s] AppleWebkit\/(\d{3})/i),
l = o.match(/U3\/((\d |\.){5,})/i),
c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
s = i.devicePixelRatio || 1;
p || d && d[1] > 534 || c || (s = 1);
var u = normal ? 1 : 1 / s,
m = r.querySelector('meta[name="viewport"]');
m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale="   u   ",maximum-scale="   u   ",minimum-scale="   u), r.documentElement.style.fontSize = normal ? "50px" : a / 2 * s * n   "px"
}, e.exports = t["default"]
}]);
flex(false, 100, 1);
</script>
<style type="text/css">
/*reset 重置*/
body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,td,th,button,strong,em,select,video,canvas{margin:0;padding:0;}
body{font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif; overflow-x:hidden;overflow-y:auto;}
ul,ol{list-style:none;vertical-align:top;}
table{ border-collapse:collapse;border-spacing: 0;}
textarea{resize:none;overflow:auto;}
img{ border:none; vertical-align:middle;}
em{ font-style:normal;}
a{ text-decoration:none;}
/*遮蔽陰影;ios android去除自帶陰影的樣式*/
a,input{-webkit-appearance: none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
/* 禁止長按連結與圖片彈出選單 */
a, img {-webkit-touch-callout: none;}
</style>
</head>
<body>
<div>這是個移動端模板</div>
</body>
</html>

擴充套件知識點

SegmentFault

最後說下以上的JS部分

以上JS部分為阿里團隊的高清方案佈局程式碼
作者:minooo
來源:簡書

tips:博主可是很尊重他人智慧財產權的哦(*^▽^*)!