移动端手机网页切图注意事项备忘
发布时间：2016-12-14 21:54 | 人气数：1833
1、网页设计图宽用640px
2、HTML起始模版
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="format-detection" content="telephone=no, email=no" />
</head>
<body>
</body>
</html>
3、css reset, PC与移动端通用。之所以不用rem而改为px，是因为chrome对rem的渲染还有不足，故暂时不用它.
html{-webkit-text-size-adjust: 100%; font-size: 62.5%;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input,button, textarea, p, blockquote, th, td, hr{margin: 0; padding: 0; -webkit-box-sizing: border-box;}
body{font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif, "Microsoft YaHei"; font-size: 14px; line-height: 1.5; overflow-x: hidden; -webkit-overflow-scrolling: touch;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{display: block;}
audio, canvas, progress, video{display: inline-block; vertical-align: baseline;}
audio:not([controls]){display: none; height: 0;}
[hidden], template{display: none;}
svg:not(:root){overflow: hidden;}
a{background: transparent; text-decoration: none; -webkit-tap-highlight-color: transparent;}
a:active{outline: 0;}
abbr[title]{border-bottom: 1px dotted;}
b, strong{font-weight: bold;}
dfn{font-style: italic;}
mark{background: #ff0; color: #000;}
small{font-size: 80%;}
sub, sup{font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup{top: -0.5em;}
sub{bottom: -0.25em;}
img{border: 0;}
hr{box-sizing: content-box; height: 0;}
pre{overflow: auto; white-space: pre; white-space: pre-wrap; word-wrap: break-word;}
code, kbd, pre, samp{font-family: monospace, monospace; font-size: 1em;}
button, input, optgroup, select, textarea{color: inherit; font: inherit; margin: 0;}
button{overflow: visible;}
button, select{text-transform: none;}
button, html input[type="button"], input[type="reset"], input[type="submit"]{-webkit-appearance: button; cursor: pointer;}
button[disabled], html input[disabled]{cursor: default;}
input{line-height: normal;}
input[type="checkbox"], input[type="radio"]{box-sizing: border-box; padding: 0;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{height: auto;}
input[type="search"]{-webkit-appearance: textfield; -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration{-webkit-appearance: none;}
fieldset{border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend{border: 0; padding: 0;}
textarea{overflow: auto; resize: vertical;}
optgroup{font-weight: bold;}
table{border-collapse: collapse; border-spacing: 0;}
td, th{padding: 0;}
ul, ol{list-style: none outside none;}
h1, h2, h3 {line-height: 2; font-weight: normal;}
h1{font-size: 18px;}
h2{font-size: 16px;}
h3{ font-size: 14px;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color: #ccc;}
4、flex 应用
如果说写手机页面最常用的技术是什么，我认为是 flex，为了让内容自适应，等分，水平居中，垂直居中，我们都可以直接使用 flex 解决，事实上，它的表现跟 table 类似。
等分
.parent{display: -webkit-box; display: -webkit-flex; display: flex;}
.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
水平居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}
垂直居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}
注1：上面 parent 代表父元素，child 代表子元素，水平垂直居中把上面的分别合并起来即可。
注2： 在有了 flex 之后，现在很多弹窗组件的结构也在发生着变化，以前遮罩层都是与弹窗分开的，现在在移动端，完全可以直接嵌套起来，如： div.overlay>div.pop , 然后 overlay 层 position: fixed; top: 0; bottom: 0; left: 0; right: 0; pop 层作水平垂直居中即可
zepto.js
1. zepto 打包
zepto 默认只加载 zepto、event、ajax、form、ie 模块，故不要妄想一使用zepto就想调用 tap等事件。需加载相应模块编译才可以。参考 https://github.com/madrobby/zepto 官网的编译说明。
注： 下载下来后在 `make` 文件里找到 `modules = (env['MODULES'] || 'zepto detect event ...').split(' ')` ,添加 `touch` ，参照上面官网说明编译即可。
这里有我基于 zepto 1.1.4 编译好的一份包含 touch 模块的 zepto.js zepto.min.js.zip 点击下载。
2. 点透修复
点透，就是在元素绑定 tap 事件，进行元素的隐藏或移动位置时，其底下的元素刚好绑定了 click 事件或有web响应的元素时，会触发底下元素的响应，形成 穿透 一样的效果，我们也称之为 点透。
在使用 zepto 的 tap 方法时，就会发生点透现象。
解决方法：
不要使用click事件，用tap代替 或 使用fastclick：https://github.com/ftlabs/fastclick
移动端图片宽度自适应
<div class="pic-wrap">
<img src="http://ww3.sinaimg.cn/mw690/69243898gw1emmeiydzvrj20go08cglu.jpg" alt=""/>
</div>
.pic-wrap{position: relative; padding-top: 50%;}
.pic-wrap img{position: absolute; left: 0; top: 0; width: 100%; max-width: 640px;}
此方法依赖于一定的结构，但相对于上一个方法来说，不需要依赖 JS。因为 padding 的百分比值是相对于宽度的，也就是有了跟屏幕宽度成正比的条件，所以利用 padding-top 设置与宽高等比的百分比值占位，就实现了同样的效果。计算公式： padding-top: 图片高度 * 100% / 图片宽度
关键词：手机网页, 移动端切图, 手机端
