CSS学习笔记:响应式布局的原理——媒体查询

什么是响应式布局?

在实际书写代码时,我们不会自己去手写媒体查询来实现响应式布局,我们一般会调用现成的代码库或使用现成的框架(但这些代码库或框架的底层原理是媒体查询,所以了解媒体查询也是很有必要的)

当视口大小变化时,网页布局也随之变化

以腾讯前端官网为例,当视口宽度逐渐缩小时,一行排列的盒子数量从4个减少到2个再减少到1个

媒体查询

之前我们在学习rem实现移动端适配的时候了解过媒体查询,详情见博客:CSS学习笔记:rem实现移动端适配的原理------媒体查询-CSDN博客

媒体查询能够检测视口的宽度,然后编写差异化的CSS 样式

也就是当视口宽度或高度符合某个条件时,相应的CSS样式会生效

语法

媒体特征

解释说明:max-width:200px; 代表视口宽度小于200px时样式生效

一个案例弄懂书写顺序

需求

屏幕宽度在768-992之间, 网页背景色是粉色

屏幕宽度在992-1200之间, 网页背景色是skyblue

屏幕宽度大于1200, 网页背景色是绿色

代码

html 复制代码
<!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>
        /*
            视口宽度 >= 768px,网页背景色是 粉色
            视口宽度 >= 992px,网页背景色是 绿色
            视口宽度 >= 1200px,网页背景色是 skyblue
         */

         /* css属性都有层叠性 */

         /* @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        } */
        
        @media (min-width: 768px) {
            body {
                background-color: pink;
            }
        }
        @media (min-width: 992px) {
            body {
                background-color: green;
            }
        }
        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }

    </style>
</head>
<body>
    
</body>
</html>

思考: 如果三个媒体查询的顺序改变,需求还能实现吗?

答案是不能,因为CSS样式具有层叠性,写在下面的样式会覆盖上面的样式

所以在这个案例中,我们需要保证取值范围最小的宽度写在最下面,这样才不会被取值范围大的覆盖

我画个图你就懂了

link写法

当媒体查询中的CSS样式太多时,我们可以考虑将其放入一个CSS文件中,在用媒体查询的方式引入该文件,当满足媒体查询中的视口宽度条件时,被引入的CSS文件中的样式会生效

完整写法

我们上面所学的媒体查询语法其实是简写,这也是工作中会用到的写法

但我们也有必要了解一下完整写法,注意,只是了解一下,你知道有这么个东东就行

关键词

关键词有and、only、not

媒体类型

相关推荐
在路上`18 分钟前
前端学习之后端java小白(二)-sql约束/建表
java·sql·学习
真*小白31 分钟前
Python语法学习篇(三)【py3】
开发语言·python·学习
lingggggaaaa38 分钟前
小迪安全v2023学习笔记(八十二讲)—— Java组件安全&Solr&Shiro&Log4j&CVE复现
笔记·学习·安全
好望角雾眠42 分钟前
第四阶段C#通讯开发-1:通讯基础理论,串口,通讯模式,单位转换,代码示例
开发语言·笔记·c#·串口·通讯
不一样的故事1261 小时前
学习Python是一个循序渐进的过程,结合系统学习、持续实践和项目驱动,
开发语言·python·学习
菜菜子爱学习1 小时前
系统架构设计师——【2025年上半年案例题】真题分享(一)
学习·系统架构·软考·系统架构设计师
一只乔哇噻1 小时前
java后端工程师进修ing(研一版‖day44)
java·开发语言·学习·算法
~kiss~1 小时前
MLLM学习~M3-Agent如何处理视频:视频clip提取、音频提取、抽帧提取和人脸提取
学习
呵呵哒( ̄▽ ̄)"2 小时前
专项智能练习(行为主义学习理论)
学习
贝塔实验室2 小时前
两种常用的抗单粒子翻转动态刷新方法
论文阅读·经验分享·笔记·科技·学习·程序人生·fpga开发