一、响应式布局介绍
我们发现很多网页,在用户拉动边框缩放可视区的时候,内部控件都会随着大小有变动,这个就是在自适应屏幕 - 响应式布局
响应式布局
- 网页可以根据不同的设备或窗口大小呈现出不同的效果。
- 使用响应式布局,可以使一个网页适用于所有设备(但是大公司不常用,因为手机端和网页无法做到很完美的相互适配)。
- 响应布局的关键就是 媒体查询 。
- 通过媒体查询,可以为不同的设备,或设备不同状态来分别设置样式。
特别注意:
- 电脑,手机都有屏幕 - 他们是属于一种设备;
- 网页有时候需要打印机 - 打印机又是一种设备(打印机没有屏幕);
- 根据这个设备的不同,打印的时候一个样式,屏幕上看是另外一个样式;
- 如果同一种设备,都是屏幕,但是可以是不同状态。比如:有些屏幕大,有些屏幕小,有些屏幕是横的,有些屏幕是竖的
二、媒体查询
1. 媒体查询语法介绍
语法: @media 查询规则{}
媒体类型(设备类型):
all 所有设备
print 打印设备
screen 带屏幕的设备(电脑,手机)
speech 屏幕阅读器(这种设备是不带屏幕的)
- 可以使用逗号(,)连接多个媒体类型,这样他们之间就是一个或的关系
- 可以在媒体类型前添加一个only,表示只有,比如only screen(表示只有在屏幕的时候才会运用这个效果), only不写也不影响,所以only的使用主要是为了兼容一些老版本浏览器。当发现有这个only,老版本浏览器,他就会忽略你这里设置的所有样式。
2.具体写法
<style>
/* 这句话意思是无论你在什么设备下,你的背景颜色都是绿色 */
@media all{
body{
background-color: #bfa;
}
}
@media screen{
body{
background-color: #bfa;
}
}
/* 表示在打印机打印的时候,或者屏幕的时候,都会运用到这个样式, 逗号表示或的意思 */
/* @media print, screen{
body{
background-color: #bfa;
}
} */
/* 一般我们都要么只写screen,或者all,或者only screen(表示只有在屏幕的时候才会运用这个效果) */
</style>