（一） 开发方案及布局技术选型
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; }
No comments:
Post a Comment