把页面的通用属性全部写出来。
所有的手机端新建项目时候都可以直接拿这套代码快速搭建一个手机端框架。
js中规定了页面最大宽度。为16rem。所以width:16rem;就等于width:100%;
我一般喜欢把边距设置为0.5rem。所以页面一般宽度我写了15rem。
rem写法好处是,自适应手机屏,手机屏不管是大小,都完美显示,不会错位。
相比用百分比写法,rem写法计算相对简单。
设计图画多大像素就对应写多少rem。比百分比页面精确。
HTML部分,在html标签上写一个id。然后js控制html页面宽度。layui.js 和 jquery.js 自行引入。我就不提供了。
<!DOCTYPE html>
<html lang="en" id="leekoh">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="layui/layui.js"></script>
<title></title>
</head>
<body>
<nav>
<a onClick="javascript :history.back(-1);"><i class="layui-icon layui-icon-left" style="color: #fff; width: 40px; line-height: 2rem;"></i></a>
<span class="renwu">首页</span>
</nav>
<div class="nav_bg"></div>
</body>
</html>
css部分清除原始的标签属性。后面用起来更顺手。
*{
margin: 0;
padding: 0;
border: 0;
color: #333;
font-family: "\5FAE\8F6F\96C5\9ED1", Arial;
}
html {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
font-size: 20px;
background: #F2F2F2;
}
body {
min-width: 320px;
max-width: 640px;
margin: 0 auto;
}
a {
text-decoration: none;
color: #333;
webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}
table {
border: 0;
margin: 0;
border-collapse: collapse;
border-spacing: 0;
}
table th,
table td {
border: 0;
}
img {
border: 0;
vertical-align: top;
}
i,
em {
font-style: normal;
}
ol,
ul,
li {
list-style: none;
}
input,
textarea,
select,
button {
padding: 0 ;
margin: 0;
outline: none;
font-family: "\5FAE\8F6F\96C5\9ED1", Arial;
}
input[type="submit"] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/*去除input默认样式*/
}
input {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/*去除input默认样式*/
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
.color_fff {
color: #fff;
}
nav {
width: 15rem;
padding: 0 0.5rem;
height: 2rem;
background: #DD2727;
color: #fff;
overflow: hidden;
margin: auto;
position: fixed;
top: 0;
}
nav a {
width: 3rem;
height: 2rem;
color: #fff;
float: left;
line-height: 2rem;
}
nav a:nth-child(3) {
width: 3rem;
height: 2rem;
color: #fff;
float: right;
line-height: 2rem;
text-align: right;
}
nav span {
width: 9rem;
color: #fff;
float: left;
text-align: center;
line-height: 2rem;
}
.nav_bg {
width: 16rem;
height: 2rem;
}
js部分 主要是控制页面宽度,大小等。
$(function(){
var _width = $(window).width();
var _ziHao = 20 * (_width/320);
if(_width < 641){
$("#leekoh").css({"font-size":_ziHao + "px"})
}
})