rem笔记与移动web开发适配

版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_27984879/article/details/88058207

移动web开发与适配

• 跑在手机端的web页面(H5页面)
• 跨平台
• 基于webview
• 告别IE拥抱webkit

常见移动web适配方法

PC:

• 960px/1000px 居中
• 盒子模型，定高，定宽
• Display:inline-block

移动web:

• 定高
• flex
• Media Query(媒体查询)

Media Query 媒体查询

@media 媒体类型 and (媒体特性){

/*css样式*/

}

媒体类型：screen，print…
媒体特性：max-width，max-height…

rem原理与简介

rem(font size of the root element)

• 字体单位
  • 值根据html根元素大小而定，同样可以作为宽度，高度等单位
• 适配原理
  • 将px替换成rem，动态修改html的font-size适配
• 兼容性
  • Ios6 以上和 android 2.1以上，基本覆盖所有流行的手机系统

1rem = 浏览器默认字体大小 (html的font-size)
修改font-size可以修改rem的大小

采用js调整rem

使用document.documentElement.clientWidth和document.body.clientWidth方法获取设备宽度

var 变量 = document.documentElement.clientWidth || 
document.body.clientWidth;

使用document.getElementsByTagName('html')[0]获取html元素，使用变量.style.fontSize来修改

var 变量 = document.getElementsByTagName('html')[0];
变量.style.fontSize = 20px;

rem进阶

• rem基准值的计算
• rem数值计算与构建
• rem与scss结合使用
• rem适配实战