本文介绍了响应式布局的概念，强调其能使网页适应不同设备。媒体查询是响应式布局的关键，允许根据设备特性应用不同样式。文章通过实例演示了如何使用媒体查询设置不同设备的样式，并探讨了媒体类型的四种类型、媒体特性和断点设置，帮助读者理解并应用响应式设计。
响应式布局–媒体查询
前几天一个月薪35k的兄弟，给我推了一个人工智能学习网站，看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有，很详细，分享给大家。大家及时保存，说不定啥时候就没了。
一、响应式布局概念
1.1 什么是响应式布局
响应式布局
1.网页可以根据不同的设备或窗口大小呈现出不同的效果
2.使用响应式布局可以使一个网页适配所有设备
3.响应式布局的关键就是媒体查询
4.通过媒体查询可以为不同的设备、设备的不同状态来分别设置样式。
1.2 响应式布局和移动端网页的区别
响应式布局和移动端网页的区别：
1、响应式布局可以通过一个网页适用于所有的设备。
2.移动端网页是专门为移动端设备开发的网页。
1.3 响应式布局案例
响应式布局案例：
1.jquery官网。
2.美团官网
二、响应式布局实现（媒体查询）
media媒体查询
语法:
@media 查询规则{ css-code }
2.1 媒体类型(mediatype)
+++ 媒体查询一共有四种类型。
all 默认值，所有设备（可省略不写）
print 打印设备(用于打印机和打印预览)
screen 用于电脑屏幕，平板电脑，智能手机等
speech 应用于屏幕阅读器等发声设备
+++ 注意事项
1) 媒体类型之间使用【,】连接，表示或。
@media all{ } 在所有设备
@media print ,screen { } 使用逗号连接多个设备类型。表示或。
2) 在媒体类型前添加only,表示只有。
only的使用主要是为了兼容一些老版本的浏览器。
3)在媒体类型前面添加not,表示非。
4)切记not、only只能有一个
1） 媒体查询一共有四种类型，为不同设备分别指定样式
/** 支持所有设备 */
@media all {
body{
background-color: red;
}
}
/** 支持所有带屏幕的设备 */
@media screen {
body{
background-color: pink;
}
}
/** 支持打印设备 */
@media print{
body{
background-color: pink;
}
}
/** 支持阅读设备 */
@media speech {
body{
background-color: pink;
}
}
2） 媒体类型之间使用【，】连接。表示或
/** 支持所有带屏幕的设备或支持打印设备 */
@media screen , print {
body{
background-color: pink;
}
}
3）在媒体类型前添加not，表示非
@media not all {
body{
background-color: pink;
}
}
4）在媒体类型前添加only，表示只有（作用：兼容老版本）
/** 表示只支持屏幕的。兼容老版本浏览器 */
@media only screen {
body{
background-color: pink;
}
}
2.2 媒体特性
媒体特性有许多，这里只演示这几个比较重要的特性:
width 视口的宽度
min-width 视口的最小宽度 (视口大于指定宽度时生效)
max-width 视口的最大宽度 (视口小于指定宽度时生效)
height 视口的高度
min-height 视口的最小高度
max-height 视口的最大高度
(一般不考虑视口的高度，所以这三个属性不重要)
1) 指定视口宽度媒体特性，表示视口符合这个条件时，才会使用该样式
1.指定视口宽度,只有视口符合该条件时，才会使用该样式。
@media (width:500px) {
body{
background-color: pink;
}
}
>>>>>> width:500px 视口宽度只有等于这个值时，才会使用该样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/** 视口=500px时,使用该样式*/
@media (width:500px) {
body{
background-color: pink;
}
}
</style>
</head>
<body>
</body>
</html>
>>>>>> min-width:500px 视口宽度只有大于这个值时，才会使用该样式
/** 视口>500px时,使用该样式*/
@media (min-width:500px) {
body{
background-color: pink;
}
}
>>>>>> max-width:500px 视口宽度只有小于这个值时，才会使用该样式
@media (max-width:500px) {
body{
background-color: pink;
}
}
2) 媒体特性之间可以使用【not】 、【and】、【，】
not:表示非
and:表示与
,: 表示或
>>>>>> 【，】表示或
+++ 视口<300 或 视口>500 ,使用该属性
@media (max-width:300px) ,(min-width:500px){
body{
background-color: pink;
}
}
>>>>>> 【and】表示与
+++ 300 < 视口 < 500,使用该属性
@media (min-width:300px) and (max-width:500px) {
body{
background-color: pink;
}
}
3) 响应式布局断点
样式切换的分界点，我们称其为断点，也就是网页的样式在这一点时发生变化。
每一种响应式布局，都会有这样的断点。
一般比较常用的断点：
<768 超小屏幕，一般是手机 max-width=768px
>768 小屏幕 min-width=768px
>992 中型屏幕（一般为pad） min-width=992px
>1200 电脑屏幕 min-width=1200px
2.3 媒体查询总结
@media [not/only] 媒体类型 媒体特性{ css-code }
@media 媒体特性{ css-code }
转自：响应式布局–媒体查询
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
