移动web开发适配秘籍Rem
CruxF opened this issue · comments
前言
该文章通过慕课网教程《移动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';
可能需要用到的其他知识
刚学这个找到你这里了 觉得你写得不错 能不能给个源码参考下呢
@Smile-Lei 多谢赏识,源代码请点击这里,在那个WebMolie文件夹下面。老实说,这篇我过后看了一下,发现十分水,最好再来看看我整理的另一篇移动web基础知识整理
@CruxF 好的,谢谢!
来个qq或者微信交流一下