移动web开发适配rem

2018-03-31  本文已影响29人  喵呜Yuri

移动web:
1.html5页面
2.跨平台
3.告别ie,基于webkit
4.对手机端的适配性和性能要有更高的要求。因为安卓手机尺寸不一,手机端网络状况更加复杂

在移动页面更多的是使用:
1.定高,宽度百分比
2.flex布局
3.媒体查询

image.png

css媒体查询适配:
大家不要这样写css媒体查询,根据顺序不同效果也是不同的,这不是我们希望的


image.png

而是写成这样


image.png

js适配:


image.png

rem适配页面实战:
1.与sass结合
sass的安装,使用,配置手把手教你:https://www.jianshu.com/p/ce6294d07f57
模拟iphone6 宽375的屏 所以37.5

image.png
上一篇 下一篇

猜你喜欢

热点阅读