01 什么是响应式布局
- 响应式布局的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。即一个网页可以实现适应不同的终端,而不是根据每个终端做调整。
内容:
- 设置viewport/scale
- 使用流体宽度(也就是设置max/min-width,不使用固定宽度)
- 媒体查询(Media Queries)(不同的css样式对应不同的屏幕大小)
- Rem单位转换
- 移动优先
02 媒体查询(Media Queries)
媒体查询允许我们根据设备的特性来应用不同的样式申明
- 语法
以@media
开头来表示这是一条媒体查询语句,@media
后面的是一个或者多个表达式,如果表达式为真,则应用样式。
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
//在屏幕宽度小于 600px 的时候,会作用大括号里的内容
媒体查询可以在 link标签上加media属性或css文件中使用
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
- 媒体查询语句结构
由媒体类型 +一到多个CSS属性判断组成,而多个CSS属性判断可以用关键字and连接。媒体类型是可选的,默认是全部(all)
@media screen and (min-width:1024px) and (max-width:1280px) and (animation){
body{font-size:medium;}
}
max与min
他们是要配合支持它们的属性使用的
@media (min-width:1000px) and (min-device-width:1500px){
body{font-size:medium;}
}
- 逻辑操作符
操作符 not,and 和 only 可以用来构建复杂的媒体查询。
and 操作符用来把多个 媒体属性 组合起来,合并到同一条媒体查询中,只有当每个属性都为真时,这条查询的结果才为真。
not 操作符用来对一条媒体查询的结果进行取反。
only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式,可以通过它让选中的样式在老式浏览器中不被应用。
若使用了 not 或 only 操作符,必须明确指定一个媒体类型。
- media query支持的属性
属性 | 值 | 是否接受 min/max 前缀 | 描述 |
---|---|---|---|
color | 整数 | yes | 每种色彩的字节数 |
device-aspect-ratio | 整数/整数 | yes | 宽高比例 |
device-height | 整数+单位 | yes | 设备屏幕的输出高度 |
device-width | 整数+单位 | yes | 设备屏幕的输出宽度 |
grid | 整数 | no | 是否是基于格栅的设备 |
height | 整数+单位 | yes | 渲染界面的高度 |
monochrome | 整数 | yes | 单色帧缓冲器中每像素字节 |
resolution | 分辨率(“dpi/dpcm”) | yes | 分辨率 |
scan | Progressive interlaced | no | tv媒体类型的扫描方 |
width | 整数+单位 | yes | 渲染界面的宽度 |
orientation | Portrait/landscape | no | 横屏或竖屏 |
-
webkit浏览器对media query支持的属性
常见的有
transform-2d 只用于支持使用 -webkit-transform实现2D变换的浏览器
transform-3d 只用于支持使用 -webkit-transform实现3D变换的浏览器
transition 只用于支持使用-webkit-transition实现变换效果的浏览器
animation 只用于支持使用-webkit-animation实现动画的浏览器
-
媒体类型(media type)列表
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示,比如幻灯
screen 彩色电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体,比如电传打字机
tv 电视
device-aspect-ratio
device-aspect-ratio可以用来适配特定屏幕长宽比的设备
/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
selector{
}
}
/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
selector{
}
}
03 Em和Rem单位
Em,相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
Rem,相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。
Em
em是相对于父级元素的单位,会随父级元素的属性(font-size或其它属性)变化而变化
eg:
<div class='embox'>
用em相对长度单位来设置文本的字体大小</span>
</div>
//样式
.embox {
border:1px solid red;
width:200px;
height:100px;
font-size:30px;
}
.em {
font-size:0.5em;
}
/*30px x 0.5 = 15px*/
Rem
rem是相对于根目录(HTML元素)的,所有它会随HTML元素的属性(font-size)变化而变化
eg:
<div class='rembox'>
用rem相对长度单位来设置文本的字体大小</span>
</div>
//样式
.rembox {
border:1px solid red;
width:300px;
height:100px;
font-size:30px;
}
.rem {
font-size:0.5rem;
}
/*16px x 0.5 = 8px*/
Em 和Rem 单位之间的区别是浏览器根据谁来转化成px值,em是基于当前对象内文本的字体尺寸决定,rem是基于html元素的字体大小来决定,而根(html)元素的字体大小如果没有显式地设置固定值去覆盖,那么它首先来自浏览器设置,因此浏览器的字体大小设置可以影响每个使用rem单元以及每个通过em单位继承的值。为了还原设计稿和实现合理的布局所以需要根元素重写。