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

媒体类型

相关推荐
Simulink_1 小时前
ROS学习笔记15——Xacro
linux·笔记·学习·机器人·ros
2301_775281192 小时前
当日本人说「お疲れ様」时,该怎么回?柯桥日语培训零基础学习
学习
E___V___E3 小时前
CSAPP学习
学习
Tony_long74833 小时前
Python学习——猜拳小游戏
开发语言·python·学习
Diamond技术流3 小时前
从0开始学习Linux——环境变量详解
linux·服务器·学习·centos·软件安装·环境变量
陈苏同学3 小时前
机器翻译 & 数据集 (NLP基础 - 预处理 → tokenize → 词表 → 截断/填充 → 迭代器) + 代码实现 —— 笔记3.9《动手学深度学习》
人工智能·pytorch·笔记·python·深度学习·自然语言处理·机器翻译
烟雨长虹,孤鹜齐飞5 小时前
【分布式锁解决超卖问题】setnx实现
redis·分布式·学习·缓存·java-ee
南宫生5 小时前
力扣-位运算-1【算法学习day.41】
java·学习·算法·leetcode
前端Hardy5 小时前
HTML&CSS:比赛记分卡
前端·javascript·css·3d·html