IMOOC
IMOOC copied to clipboard
Published
20 hours ago •
CruxF
CruxF
移动web开发适配秘籍Rem
前言
该文章通过慕课网教程《移动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 {
width: 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-width: 320px) {
.inner {
height: 100px;
width: 25%;
float: left;
}
}
@media screen and (min-width: 321px) {
.inner {
height: 100px;
width: 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;
width: 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;
width: 100%;
background-color: black;
font-size: 1rem;
color: white;
text-align: center;
}
@media only screen and (min-width: 360px) and (max-width: 860px) {
html {
font-size: 300px;
}
div {
color: red;
}
}
@media only screen and (min-width: 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;
width: 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 {
width: px2rem(75px);
height: px2rem(37.5px);
}
// 编译后的结果
.demo {
width: 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);
width: 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简单安装使用
