一，移动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';
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
