1.响应式布局介绍:一个html页面适配多个不同的设备
优点:全适配(一个html文件就可以适配所有的屏幕)
缺点:不便于维护(响应式布局其实把多个页面的css写在了一个html中,造成css代码冗余)
2.核心原理:使用媒体查询技术,根据不同的设备尺寸加载不同的样式
3.媒体查询语法
- 标准语法 @media screen and(设备尺寸) {css样式} 简写: @media(设备尺寸) {css样式} 注意:括号里不需要添加分号
- 区间查询 设备尺寸>=区间:@media(min-width:1200px) {css样式} 设备尺寸<=区间:@media(max-width:1200px) {css样式}
-
常见的四种设备尺寸
大PC >=1200px body红色
小pc/ipad pro 992-1200px body橙色
平板(ipad) 768-992 body黄色
手机(iphne) <768 body绿色
4.术语
-
媒体类型
媒体是用来区分设备类型的,如屏幕设备、打印设备等,其中手机、电脑、平板都属于屏幕设备。
类型名称 | 值 | 描述 |
---|---|---|
屏幕 | screen | 带屏幕的设备 |
打印预览 | 打印预览模式 | |
阅读器 | speech | 屏幕阅读模式 |
不区分类型 | all | 默认值,包括以上3种情形 |
-
媒体特性
媒体特性主要用来描述媒体类型的具体特征,如当前屏幕的宽高、分辨率、横屏或竖屏等。
特性名称 | 属性 | 值 |
---|---|---|
视口的宽和高 | width、height | 数值 |
视口最大宽或高 | max-width、max-height | 数值 |
视口最小宽或高 | min-width、min-height | 数值 |
屏幕方向 | orientation | portrait 或 landscape |
-
逻辑符
连接媒体和媒体特性的固定词语,分别为 not、only、and。
5.语法
- /*
这段代码的含义是:
并且视口的宽度为 640px
body 的背景色为粉色
*/
@media only screen and (width: 640px) {
body {
background-color: pink;
}
} - /*
这段代码的含义是:
媒体类型除了 screen
并且视口的宽度为 640px
body 的背景色为粉色
*/
@media not screen and (width: 640px) {
body {
background-color: pink;
}
}
检测视口的宽度和高度
/*
这段代码的含义是:
当视口宽度为 640px 且 高度为 720px,body 的背景色为蓝色
*/
@media only screen and (width: 640px) and (height: 720px) {
body {
background-color: blue;
}
检测视口的最大宽度和高度
/*
这段代码的含义是:
当视口宽度小于等于 640px 且 高度小于等于 720px,body 的背景色为蓝色
*/
@media only screen and (max-width: 640px) and (max-height: 720px) {
body {
background-color: blue;
}
检测视口的最小宽度和高度
/*
这段代码的含义是:
当视口宽度大于等于 640px 且 高度大于等于 720px,body 的背景色为蓝色
*/
@media only screen and (min-width: 640px) and (min-height: 720px) {
body {
background-color: blue;
}
检测屏幕的方向
/*
这段代码的含义是:
当屏幕坚屏状态时,背景色为蓝色
*/
@media only screen and (orientation: portrait) {
body {
background-color: blue;
}
/*
这段代码的含义是:
当屏幕横屏状态时,背景色为红色
*/
@media only screen and (orientation: landscape) {
body {
background-color: red;
}
/* 在些还可以更多其它任意的 css */
}
/* only screen 可以被省略 */