移动端技术选型

2020-09-14 22:00:16

（一） 开发方案及布局技术选型

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，设定插件c***em的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; }