移动web开发之rem布局（rem基础、媒体查询、less基础、rem适配⽅案）移动web开发之rem布局
⼀、rem基础
rem单位
rem (root em)是⼀个相对单位，类似于em，em是⽗元素字体⼤⼩。
不同的是rem的基准是相对于html元素的字体⼤⼩。
⽐如，根元素（html）设置font-size=12px; ⾮根元素设置width:2rem; 则换成px表⽰就是24px。
/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体⼤⼩就是 24px */
div {
font-size: 2rem;
}
rem的优势：⽗元素⽂字⼤⼩可能不⼀致， 但是整个页⾯只有⼀个html，可以很好来控制整个页⾯的元素⼤⼩。
⼆、媒体查询
2.1 什么是媒体查询
媒体查询（Media Query）是CSS3新语法。
使⽤ @media查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺⼨设置不同的样式
当你重置浏览器⼤⼩的过程中，页⾯也会根据浏览器的宽度和⾼度重新渲染页⾯
⽬前针对很多苹果⼿机、Android⼿机，平板等设备都⽤得到多媒体查询
2.2 媒体查询语法规范
⽤ @media开头 注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有⼩括号包含
@media mediatype and|not|only (media feature) {
CSS-Code;
}
1. mediatype 查询类型
将不同的终端设备划分成不同的类型，称为媒体类型
2. 关键字
关键字将媒体类型或多个媒体特性连接到⼀起做为媒体查询的条件。
and：可以将多个媒体特性连接到⼀起，相当于“且”的意思。
not：排除某个媒体类型，相当于“⾮”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。
3. 媒体特性
每种媒体类型都具体各⾃不同的特性，根据不同媒体类型的媒体特性设置不同的展⽰风格。我们暂且了解三个。注意他们要加⼩括号包含
案例：根据页⾯宽度改变背景变⾊
实现思路：
① 按照从⼤到⼩的或者从⼩到⼤的思路
② 注意我们有最⼤值 max-width 和最⼩值 min-width都是包含等于的
③ 当屏幕⼩于540像素， 背景颜⾊变为蓝⾊ （x <= 539）
④ 当屏幕⼤于等于540像素 并且⼩于等于 969像素的时候 背景颜⾊为 绿⾊ ( 540=<x <= 969）
⑤ 当屏幕⼤于等于 970像素的时候，背景颜⾊为红⾊ （ x >= 970）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible"content="ie=edge"/>
<title></title>
<style type="text/css">
/* 这句话的意思就是：在我们屏幕上并且最⼤宽度是 800px，设置我们想要的样式  max-width 最⼤宽度为800px,⼩于等于800px */
/* 媒体查询可以根据不同的屏幕尺⼨来设置不同的样式 */
/* 宽度⼩于540px时，背景颜⾊变为粉⾊ */
@media screen and (max-width: 539px){
body{
background-color: blue;
}
}
/* 宽度540~970时，背景颜⾊变为紫⾊ */
/* @media screen and (min-width: 540px) and (max-width: 969px){
body {
background-color: green;
}
} */
@media screen and (min-width: 540px){
body{
background-color: green;
}
}
/* 宽度⼤于970px时，背景颜⾊变为红⾊ */
@media screen and (min-width: 970px){
body{
background-color: red;
}
}
</style>
</head>
<body>
</body>
css变量</html>
4. 媒体查询书写规则
screen还有and必须带上不能省略的
我们的数字后⾯必须跟单位970px，这个px不能省略的
注意： 为了防⽌混乱，媒体查询我们要按照从⼩到⼤或者从⼤到⼩的顺序来写，但是我们最喜欢的还是从⼩到⼤来写，这样代码更简洁。媒体查询从⼩到⼤优势代码分析:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible"content="ie=edge"/>
<title></title>
<style type="text/css">
/* 这句话的意思就是：在我们屏幕上并且最⼤宽度是 800px，设置我们想要的样式  max-width 最⼤宽度为800px,⼩于等于800px */
/* 媒体查询可以根据不同的屏幕尺⼨来设置不同的样式 */
/* 宽度⼩于等于800px时，背景颜⾊变为粉⾊ */
@media screen and (max-width: 800px){
body{
background-color: pink;
}
}
/* 宽度⼩于等于500px时，背景颜⾊变为紫⾊ */
@media screen and (max-width: 500px){
body{
background-color: purple;
}
}
</style>
</head>
<body>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。