2020年9月14日星期一

移动端技术选型

(一) 开发方案及布局技术选型

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; }



移动端技术选型Shopify 后台实操unsplash义乌跨境出口电商发展论坛-wish专场Lulus亚马逊流媒体设备Fire TV,全球活跃用户数超4000万继15亿之后,2019年Prime Day销售额再创奇迹?速卖通店铺流量下滑怎么办?怎么提升流量?亚马逊运营问题QA集锦_亚马逊运营常见问题汇总

没有评论:

发表评论