近期做客户端页面，很是迷茫，过程中，学习了不少知识，仅作总结，以备参考。
一般我们拿到设计稿是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感谢网络诸位大神指点，才得已汇总，仅作参考。