一、640设计稿
1)现在比较流行的做法是按照iPhone 5的尺寸来设计
倍率2,逻辑像素320x568。看到的设计稿的宽度就是640的了,当你在编写页面的时候,就要缩小一倍。
边距宽度等缩小一倍比较精确,但是如果是字体缩小一倍的话,放到手机上面看就不太合适啦,比如16px的,缩小一倍就是8px,有点小了。
自己刚开始写的时候,不明白这640的意义,就自己在那边随便改边距等,当和设计稿差不多的时候,就好了。
这样写出来的跟设计稿是有出入的,等于是否定了设计师的成果。
2)自定义icon字体
移动端,引入的文件最好是小一点,这样在用2G载入的时候,速度也能快点。
原先我用的字体库是Font-Awesome,做PC后台的时候,用这个不错,什么类型的都有了,但是前端页面最好还是只要需要的。
这次使用了阿里的Iconfont,在这里面可以自己制作字体,并且还有Unicode方式,让IE6这种低端浏览器也来享受自定义字体。
二、穿透层与流布局
1)flex布局
上图中最后一列有个空白处,而点击这个空白处就需要能穿透点击到下面那个列表。
这次地方就需要CSS,pointer-events:none。
其实用到这个属性也是逼不得已,上面的布局在有顶宽的时候,是很简单的,float浮动+宽高度定死,宽度只要计算一下就能出来。
但是手机页面的话,屏幕宽度都是不定的,那么要计算这个宽度的话就太难了,而且还有margin,左右都有,中间也有。
没办法就用了个flex布局,这个可以让浏览器自动计算宽度,而且还是让宽度自动相等。
接着就出现了上面要穿透的问题了。
flex流布局有很多属性,而我这次在项目中也仅仅是为了方便计算宽度。
/*flexbox布局*/ .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} .flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;} .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;} .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;} .flex-2{-webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2;} .flex-3{-webkit-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3;}
2)column属性
这个是多列布局属性,上面的城市块布局,本来是想用这个的,但发现很不合适。
dl { -webkit-column-count:4; -webkit-column-gap: 1px; column-count:4; column-gap: 1px; }
<dl> <dd> <img src="images/city/nanjing.png"/> <p>南京</p> </dd> <dd> <img src="images/city/hefei.png"/> <p>合肥</p> </dd> <dd> <img src="images/city/shanghai.png"/> <p>上海</p> </dd> </dl>
跟我想象中的使用方法不一样,里面如果是一个标签的话,比如只要显示个img标签,展现的就是流布局
<dl> <img src="images/city/shanghai.png"/> <img src="images/city/shanghai.png"/> </dl>
三、选择符
写PC端的时候,用选择符会很谨慎,万恶的低版本IE好多选择符都不支持,而到了移动端,情况就不同啦,好多都能支持。
所以这次我大量使用了选择符。
伪类选择符:first-child、:last-child、:last-of-type等用的好多,原先很多列表的最后一个的样式与其他地方不一样,要么额外加一个样式要么用JS控制,现在只要用选择符就能搞定,代码的简洁性也增强了。
1)用伪类美化单选框或多选框
用::before来将原控件盖住,用图片替代,在:checked选中后修改图片,本来这些都是需要配合JS脚本的,现在只用CSS即可。
只是第一次点击某个多选框的时候,会先隐藏,然后再出现选中图片,造成一个闪烁。
input[type="checkbox"] { position: absolute; vertical-align: top; margin-top: 4px; margin-left: -20px; visibility:hidden; } input[type="checkbox"]::before { content: ''; background:url('../images/checkbox.png') no-repeat center center; position: absolute; top:-3px;left:-2px; width:18px;height:19px; visibility:visible; } input[type="checkbox"]:checked::before { content: ''; background:url('../images/checkbox_checked.png') no-repeat center center; position: absolute; top:-3px;left:-2px; width:19px;height:19px; visibility:visible; }
2)flex布局与::after配合出现的问题
这个地方为了宽度相等,间距一样,我使用了flex布局,用flex布局还会自动会将高度也对齐
选中的地方会有个小勾,并且有三角形背景,分别用了::before和::after设置,上面的图片中就是两个高度不一样的内容块
在IOS中,一切正常,很OK,但是在Android系统中就有点苦了。这好端端的三角形变形啦。
后面发现小勾是根据内容块中原先的高度相对定位的,后面自动拉高后就不会触发那段CSS了,最终只能用JS修改内容块的高度,然后在触发::after中的样式
ul li.active{ border:1px solid #dc481b; overflow:hidden; } ul li.active::before{ content: "\e605"; position:absolute; right:2px; bottom:2px; z-index:2; color:#FFF; } ul li.active::after{ content:"#"; background:#dc481b; color:#dc481b; width:50px; height:50px; position:absolute; right:-25px; bottom:-25px; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
四、h1~h6
这几个我在写CSS的时候用的非常多,但是由于沿用的是PC中的reset,显示在移动端,字体会特别的大
而且在reset的时候,会设置margin-top和margin-bottom,可是好多场景下,都不会用到或者被父级元素用到了
索性我就去除了外边距,然后重新reset了这几个标签中字体大小
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family: inherit;font-weight: 500;line-height: 1.1;color: inherit;} h1 small,h2 small,h3 small,h4 small,h5 small,h6 small, .h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small, h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small, .h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small { font-weight: normal;line-height: 1;color: #777; } h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small, h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small { font-size: 65%; } h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small, h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small { font-size: 75%; } h1,.h1 {font-size: 22px;}h2,.h2 {font-size: 20px;}h3,.h3 {font-size: 18px;} h4,.h4 {font-size: 16px;}h5,.h5 {font-size: 14px;}h6,.h6 {font-size: 12px;}
五、微信浏览器中记住密码
在一次登录微信页面后,客户希望能不用再次输入帐号密码,直接进入登录状态。
简单点么,就用cookie保存账户信息好了,但是要求在退出微信后,还能登录,这个时候用cookie就不行了。
后面只得获取公众号的openid,然后将openid和账户绑定,当读取到openid的时候,读取到账户信息,从而模拟登录。
由于只需要获取openid,所以可以避免弹出授权页面。点击查看网页授权获取用户基本信息。
后面还做了个微信关注后将推送欢迎信息。
六、脚本
页面肯定会有验证的逻辑,还有弹出框的展示,在写页面的时候,写的比较仓促。
在将页面写好后,特地自己整理了两个小插件,方便以后自己开发的时候使用,并且代码很少都只有200多行。插件分别是zDialog和zValidate。
1)zepto
整个脚本使用了zepto类库,语法与jQuery相似,但是又有些不同,有些jQuery可以使用的方式,在这里不能使用。
可以不用载入完整的zepto,根据需要再载入不同的模块。如下面的图片:
2)用iSlider来做图片切换
有中文文档说明,还能自定义添加组件,这个文档很详细,看了就会。点击查看iSlider。
3)用Lightbox2点击查看大图展示
老字号的一个插件,作者重新写了个第二版本的,我稍微修改了下,让这个插件能够支持手指的左右滑动事件,这样更接地气。点击查看Lightbox2。
4)用lazyload来延迟图片加载
图片可以不用一下子全部加载进来,可以在滚动的时候显示。点击查看lazyload。
5)用dropload做下来刷新特效,用mustache模版插件来填充内容
自己公司有个项目需要用到下拉刷新,当时的同事使用了iScroll插件,这个插件很大,而且连带了很多副作用,这次我想找个简单点的,代码能少一点,好让我知道原理的,就找到了这个插件,目前用的很流畅。点击查看dropload。
配合mustache,将内容展现在页面上。
6)用lrz4来上传图片
上传图片是经常使用的一个功能,我在搜索的时候看到了这个插件,也用了一下,挺方便的,运用JS技术,读取到图片的base64内容,再将内容传送到服务器接收,并生成图片。
文档也是蛮全的,点击查看lrz4。在使用的时候自己也做了些封装,使之更容易使用。
7)用fastclick解决zepto的tap点透问题
我在网上看点透看到是在一张页面中的,可我这个地方显示的点透却是在两张页面中。
当时在微信浏览器中会出现这种点透情况,可是在UC浏览器中却不会出现。
而且在微信浏览器中第一次进入的时候不出现,点击浏览器中的返回按钮,再次进入才会出现。
如下面的操作,红色框框中的地方,进入到下一个页面,就会自动点击到那个位置的地方,那个地方正好有弹出层事件。
点头的原理我这里不介绍了,在搜索引擎中输入“tap 点透”,会出现一大串的。
最后我用fastclick,将300ms延迟去除,将绑定的tap事件改成click事件,就没有出现这种情况了,难道说微信浏览器在将两个页面放在一起了吗?才导致这个问题.....
参考资料:
http://www.ui.cn/detail/48317.html 移动端尺寸基础知识
http://www.qianduan.net/css3-pointer-event-description/ CSS3 pointer-events介绍
http://qianduanblog.com/post/css-learning-19-css3-flex-responsive-design-class.html css3 flex流动自适应响应式布局样式类
http://zh.learnlayout.com/column.html column
http://youyogmail-001-site1.site4future.com/archives/zepto-tap-click-through-research.html zepto tap “点透”研究
http://www.cnblogs.com/mmmjiang13/p/4141557.html 微信内置浏览器WebApp开发