客户端页面粗略见解
近期做客户端页面，很是迷茫，过程中，学习了不少知识，仅作总结，以备参考。
一般我们拿到设计稿是640px宽度的
这个时候，把图片按照640px原大小切下，另存为png
使用ps把设计稿缩放一半50%
按照这个缩放之后的320px宽度,切页面
里面的图片background-size:50 % 50%
图片 字体 间距 都是 缩放一半的，按照320px的测量来写
设置样式 html {font-size:62.5%}
在使用rem写大小的时候 1rem=10px 按照这个比例 去进行换算
比如 缩放320px的设计稿 里面的字体大小是12px.这个时候，写css就是 12/10=1.2rem大小
图片 大小是30px.这个时候css写 图片宽度：30/10=3rem 高度可以height:auto
意思就是 图片 高保真，按照原图切，写样式的时候，按照缩放之后的大小写，即可
最外层设置宽度 100%。或者（max-width:640px;）
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
这样可设置padding,而不会撑破布局
或者 个性化定制 css设置 html{font-size:10px}
之后，下面进行 写 span{font-size:2rem;}也就是 相当于 span{font-size:20px}
当日后需要调整字体大小的时候，直接在 html{font-size:10px}这里修改 10px的大小即可。修改一个地方
改变了全局的字体大小
这里为什么说到设置了 font-size:62.5% & font-size:10px 之后,就是相当于 1rem=10px呢
因为,目前大部分浏览器默认字体是 16px.所以^
说到这里,一般的业务需求,这样做,可以,.每个机型显示的字体大小都是一样大小的.
如果业务需求,不同机型,不同的字体大小.iphone6上面的字体大小,大于iphone4上面的字体,这样的需求时候
就需要
@media screen and (min-width:100px){ /* iPhone 4,5 */
html{ font-size: 10px;}
}
@media screen and (min-width:320px){ /* iPhone 4,5 */
html{ font-size: 10px;}
}
@media screen and (min-width:375px){ /* iPhone 6 */
html{ font-size: 12px;}
}
@media screen and (min-width:414px){ /* iPhone 6 plus */
html{ font-size: 12px;}
}
@media screen and (min-width:600px){
html{ font-size:14px;}
}
这样设置了.下面 1rem=10px span{font-size:1rem}
或者使用百分比
@media all and (max-width: 320px) {
html,
body {
font-size: 62.5%;
}
}
@media all and (min-width: 321px) and (max-width: 413px) {
html,
body {
font-size: 72.5%;
}
}
@media all and (width: 414px) {
html,
body {
font-size: 82.5%;
}
}
这样设置之后,也是按照 1rem=10px 去进行换算
<!DOCTYPE HTML>
<html>
<head>
<!--申明当前页面的编码集-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--网页标题-->
<title>HTML5移动端开发模板</title>
<!--网页关键词-->
<meta name="keywords" content="" />
<!--网页描述-->
<meta name="description" content="" />
<!--适配当前屏幕-->
<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">
<style type="text/css">
/*reset 重置*/
@charset "utf-8";
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;}
li{list-style:none;}
table{ border-collapse:collapse;}
textarea{resize:none;overflow:auto;}
img{ border:none; vertical-align:middle;}
em{ font-style:normal;}
a{ text-decoration:none;}
a,input{
-webkit-appearance: none;/*屏蔽阴影*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
/*ios android去除自带阴影的样式*/
}
a, img {
/* 禁止长按链接与图片弹出菜单 */
-webkit-touch-callout: none;
}
html{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
/* 禁止选中文本(如无文本选中需求,此为必选项) */
-webkit-user-select: none;
user-select: none;
-webkit-font-smoothing: antialiased; //让页面里的字变得清晰。
-moz-osx-font-smoothing: grayscale; //让页面里的字变得清晰。
}
/*public*/
@media screen and (min-width:100px){ /* iPhone 4,5 */
html{ font-size: 10px;}
}
@media screen and (min-width:320px){ /* iPhone 4,5 */
html{ font-size: 10px;}
}
@media screen and (min-width:375px){ /* iPhone 6 */
html{ font-size: 12px;}
}
@media screen and (min-width:414px){ /* iPhone 6 plus */
html{ font-size: 12px;}
}
@media screen and (min-width:600px){
html{ font-size:14px;}
}
body{font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif;
overflow-x:hidden; overflow-y:auto;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
.fl{float:left;}
.fr{float:right;}
</style>
</head>
<body>
<div>
<div>这是一个移动端开发模板</div>
</div>
</body>
</html>
PS:这段模板参考 段亮博客
http://www.duanliang920.com/learn/web/html5/321.html
感谢网络诸位大神指点，才得已汇总，仅作参考。
