移动端的适配,利用html5+css3构建的页面在手机各个设备上显示的一致性,需要进行适配处理,以及koala工具与cssrem插件使用,自动的将px转换成rem
见文中示例代码和gif图所示移动端适配以及百分比布局与rem比较
- 流式布局,视口(viewport)宽度与设备等宽,做自适应,100%或者具体像素值
- 固定高度,宽度百分比适配,flex布局,这种方式比较适合布局均匀,适合100%布局,内容结构不复杂
- 固定宽度,设定一个标准值(比如以640为准),改变缩放比例(动态的创建meta标签,改变缩放比例)
- rem做适配,在不同的设备上显示不同的效果
- 像素比适配:像素比 = 物理像素/独立像素
欢迎关注微信itclan公众号