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

媒体类型

相关推荐
齐 飞1 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
lulu_gh_yu16 分钟前
数据结构之排序补充
c语言·开发语言·数据结构·c++·学习·算法·排序算法
丫头,冲鸭!!!35 分钟前
B树(B-Tree)和B+树(B+ Tree)
笔记·算法
Re.不晚40 分钟前
Java入门15——抽象类
java·开发语言·学习·算法·intellij-idea
听忆.1 小时前
手机屏幕上进行OCR识别方案
笔记
幼儿园老大*2 小时前
走进 Go 语言基础语法
开发语言·后端·学习·golang·go
Selina K2 小时前
shell脚本知识点记录
笔记·shell
2 小时前
开源竞争-数据驱动成长-11/05-大专生的思考
人工智能·笔记·学习·算法·机器学习
ctrey_2 小时前
2024-11-4 学习人工智能的Day21 openCV(3)
人工智能·opencv·学习
黎金安2 小时前
前端第二次作业
前端·css·css3