手机端页面介绍
虽然不完全是我写的，但这是我综合了博客，百度，资料整理得出的结果-^-^-
可以根据情况引入
常用的快捷缩写，根据个人习惯来,仅供参考
透明：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>