一,移动web
- 泡在手机端的web页面(H5页面)
- 跨平台
- 基于webview
- 告别IE拥抱webkit
- 更高的适配和性能要求
移动web适配方法
- 定高,宽度百分比
- flex(弯曲,弹性)
- Media Query(媒体查询)
-
启动自适应浏览器宽度
-
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
-
设置默认rem的字体大小 <html> font-size:16px;</html
Media Query(媒体查询)
@Media 媒体类型 and (媒体特性){
/* css样式*/
}
媒体类型:screen,print
媒体特性:max-width,max-height
#nth-child() 规定属于其父元素的第二个子元素的每个 p 的背景色
二,rem原理与简介
rem(font size of the root element)
- 字体单位——值根据html根元素大小而定,同样可以作为宽度,高度单位。
- 适配原理——讲px替换成rem,动态修改html的font-size适配。
- 兼容性——Ios6以上和android2.1以上,基本覆盖所有流行的手机系统。
1 rem = 浏览器默认字体大小 = 16 px = html的font-size
//获取视窗宽度
let htmlWidth = document.documentElement.clienWidth || document.baody.clienWidth;
//获取高度高度
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontsize = htmlDom / 10 +'px';