课程地址
https://www.imooc.com/video/16490
该文章通过慕课网教程《移动web开发适配秘籍Rem》编写而成，大体上的内容与课程一致。
移动端开发有如下的特点
- 跑在手机端的web页面（H5页面）；
- 跨平台；
- 基于webview；
- 告别IE拥抱webkit；
- 更高的适配和性能要求。
常见移动web适配方法
（1）PC端
- 960px/1000px居中；
- 盒子模型，定宽，定高；
- display:inline-block。
（2）移动web
- 定高，宽度百分比；
- flex；
- Media Query(俗称媒体查询，和flex组合被称为响应式布局)。
Media Query详解
（1）基本语法
@media 媒体类型 and (媒体特性){
/css样式/
}
媒体类型：screen，print。。。
媒体特性：maxwidth，max-height，min-width，min-height。。。
（2）基本案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MediaQuery</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
100%;
background-color: red;
}
.inner:nth-child(1) {
background-color: red;
}
.inner:nth-child(2) {
background-color: blue;
}
.inner:nth-child(3) {
background-color: yellow;
}
.inner:nth-child(4) {
background-color: green;
}
@media screen and (max- 320px) {
.inner {
height: 100px;
25%;
float: left;
}
}
@media screen and (min- 321px) {
.inner {
height: 100px;
100%;
}
}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
</html>
rem原理与简介
（1）rem是一种字体单位，值根据html根元素大小而定，同样可以作为宽度，高度等单位；
（2）适配原理是将px替换成rem，动态修改html的font-size适配；
（3）兼容IOS6以上和Android2.1以上，基本覆盖所有流行的手机系统。
（4）rem原理代码分析
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>Rem</title>
<style>
html {
font-size: 17px;
}
.box {
height: 10rem;
10rem;
background-color: red;
}
.text {
color: #fff;
font-size: 16px;
}
/*
1rem = 17px = html的font-size(默认为16px)
10rem = 170px
* */
</style>
</head>
<body>
<div class="box">
<p class="text">hello rem</p>
</div>
</body>
</html>
动态修改HTML中fontsize
方式一：使用media
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html, body {
margin: 0;
padding: 0;
}
div {
height: 4rem;
100%;
background-color: black;
font-size: 1rem;
color: white;
text-align: center;
}
@media only screen and (min- 360px) and (max- 860px) {
html {
font-size: 300px;
}
div {
color: red;
}
}
@media only screen and (min- 860px) {
html {
font-size: 200px;
}
div {
color: green;
}
}
</style>
</head>
<body>
<div>hello rem</div>
</body>
</html>
方式二：采用JavaScript的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html, body {
margin: 0;
padding: 0;
}
div {
height: 4rem;
100%;
background-color: black;
font-size: 1rem;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div>hello rem</div>
<script>
// 获取视窗的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
console.log(htmlWidth)
// 获取视窗对象
let htmlDom = document.getElementsByTagName('html')[0]
console.log(htmlDom)
// 设置html的font-size
htmlDom.style.fontSize = htmlWidth / 10 + 'px'
</script>
</body>
</html>
rem进阶
（1）rem基准值的计算：1rem = html的font-size
（2）rem数值计算与构建：
（3）rem与scss结合使用：
@function px2rem($px) { $rem: 37.5px; @return ($px/$rem) + rem; } .demo { px2rem(75px); height: px2rem(37.5px); } // 编译后的结果 .demo { 2rem; heigth: 1rem; }
（4）rem适配实战：采用rem高仿网易新闻H5版新闻列表页
- 步骤一：首先得安装好node和webpack，相关教程请上网自行百度，安装成功的结果是输入
node -v、npm -v和webpack -v能够出现相应的版本号； - 步骤二：命令行进入项目的目录，然后执行
npm init，在项目中创建一个package.json文件； - 步骤三：将课程中package.json文件里面中dependciess这部分代码copy进去；
"dependencies": { "css-loader": "^0.28.9", "node-sass": "^4.7.2", "sass-loader": "^6.0.6", "style-loader": "^0.20.2", "url-loader": "^0.6.2" }
注意： 由于我是全局安装webpack，因此在dependencies中少了一处配置。
项目实战适配的原理分析
首先使用css预编译语言写好样式代码
@function px2rem($px) { // iphone6的宽度除以10 $rem: 37.5px; @return ($px / $rem)+rem; } html { background-color: #f8f8f8; } .header { height: px2rem(40px); 100%; background-color: #6170b1; padding-left: px2rem(32px); box-sizing: border-box; .header-item { list-style-type: none; float: left; color: #D1DFB7; font-size: px2rem(16px); margin-right: px2rem(20px); line-height: px2rem(40px); &:nth-child(2) { color: #fff; font-size: px2rem(17px); } } }
接着将该样式require进一个js文件中，动态更改html的font-size
require("./index.scss"); // 获得屏幕的宽度 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; // 获得html的dom let htmlDOM = document.getElementsByTagName('html')[0]; // 设置html的fontsize htmlDOM.style.fontSize = htmlWidth / 10 + 'px';
可能需要用到的其他知识
移动端H5解惑—页面适配
Sass初入门
webpack和node简单安装使用
第一节 课程介绍
第二节
