学习日记day8：移动端页面流程优化
一：切图
1：切那些（移动端能不用图片就不用图片；logo单独切因为要带链接）
2：普通切（快捷键：复制到新图层 选中 复制 新建 粘贴 保存）
3：类似切 （选中多个图层 矩形框多选 选择工具 垂直居中对齐）
4：格式 手机端支持png格式
二：重用代码
1：HTML头部； 2：css默认设置；3：js调整rem；
一个页面/首页，可以将三块代码写到一起，大项目建议分开。
<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="gb2312">
<title>标题</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style rel="stylesheet">
body,h1,h2,h3,p,dl,dd,ol,ul,th,td,form,fieldset,input,button,textarea,li{margin:0;padding:0}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,a,textarea,input,button,span,em,strong,img,div{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none; outline: none;}
html{-webkit-text-size-adjust:none;word-wrap:break-word;background:#ffffff;font-family: Arial, Helvetica, sans-serif;}
h1,h2,h3{font-size:100%}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0;empty-cells:show;font-size:inherit}
fieldset,img{border:0}cite,em,s,i,b{font-style:normal}
input,button,textarea,select{font-size:100%; border: medium none;}
body,input,button,textarea,select,option{font-size:normal}
a,input,textarea{text-decoration:none;outline:0}
li,img,label,input{vertical-align:middle}
var{font-style:normal}
ins{text-decoration:none}
body{font-size:.28rem;color:#ffffff;}
textarea{resize:none}
a{color: #3c3c3c;}
</style>
</head>
<body>
<!--structure s-->
<!--structure e-->
<script>
!function(w){
var doc=w.document,
doc_e=doc.documentElement,
max_w=720,
d=max_w/100,
resize="orientationchange"in w?"orientationchange":"resize",
html_fon=function(){
var n=doc_e.clientWidth||320;
n>max_w&&(n=max_w);
doc_e.style.fontSize=n/d+"px";
};
if(doc.addEventListener) {
w.addEventListener(resize, html_fon, false),
doc.addEventListener("DOMContentLoaded", html_fon, false)
}
}(window);
</script>
</body>
</html>
三：主体结构
1：除了字体使用rem，其余大小尽量使用百分比;
2: 相对定位控制文档流，绝对定位用在相对定位里面；position：relative按需添加。文档流可以用height：8rem撑起高度，按需添加。
3: 最外层<div class="wrapper"></div> .wrapper{max-width:720px; margin:0 auto; padding-bottom:1rem;}最后一个底部留白；
4：结构块div h1 form; 例子<div class="header"></div> .wrapper .header{width:100%;}可在此处加height撑起高度。
5：一般结构 <div class="header nav slide article list footer"></div> <a href="javascript:;" target="blank"></a>
6：字体居中：text-align:center; line-height:height;
四：调试
使用chrome调试手机版可自适应也可选各种机型调试。
五：压缩
压缩网址：https://tinypng.com/
