移动端技术选型
(一) 开发方案及布局技术选型
1. 单独制作(主流)
(1)流式百分比布局:m.jd.com(2)flex弹性伸缩布局:m.ctrip.com
【比较】前者兼容性好,但布局繁琐、尤其是在移动端不能很好布局;后者兼容性差、尤其是PC端的IE版本,但移动端布局简易、使用广泛
(3)rem+less+媒体查询布局:m.suning.com
(4)rem+flexble.js布局:m.taobao.com
【rem适配方案】html的font-size=屏幕宽度/UI稿划分份数;页面元素rem=页面元素px/html的font-size
步骤 | 操作 |
---|---|
1️⃣ | UI设计稿宽度为375px,flexble.js文件默认划分10份数,html的font-size则为37.5px,设定插件cssrem的rootFontSize为37.5 |
2️⃣ | FW中结合图标+背景图(含2/3/4/5倍图)的像素大小 |
3️⃣ | 用切片度量盒子大小+模拟文体大小 |
4️⃣ | --PSD的UI稿可以直接知道文字大小-- |
5️⃣ | 然后就像玩乐高积木一样搭建html框架 |
6️⃣ | 像做手工画画一样填充css |
2. 响应式兼容(其次)
bootstrap+grid栅格+媒体查询布局:m.samsung.com【bootstrap框架】
1 . 始于推特网
2 . 有预制样式库、组件和插件(完整的网页解决方案)
3 . 控制权在框架本身
4 . 要按照框架所规定的规范进行开发
5 . 有自己的生态圈,不断的更新迭代
6 . 让开发更简单,提高了开发的效率
(二) 技术解决
初始化样式normalize.css
①保留了有价值的默认值②修复浏览器的bug
③是模块化的
④拥有详细的文档
特殊样式
①点击链接背景高亮清除:-webkit-tap-highlight-color: transparent;
②ios按钮和输入框清除:-webkit-appearance: none;
③禁止长按页面弹出菜单:img,a { -webkit-touch-callout: none; }
作者:MaricoCheung
出处:http://www.cnblogs.com/MaricoCheung/
——有心人做有心事哦,晚安EmilyChen!
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。