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

媒体类型

相关推荐
星梦清河5 分钟前
宋红康 JVM 笔记 Day16|垃圾回收相关概念
java·jvm·笔记
誰能久伴不乏11 分钟前
Modbus 速查与实战笔记(功能码、帧结构、坑点)
笔记
长安——归故李33 分钟前
【modbus学习】
java·c语言·c++·学习·算法·c#
索迪迈科技35 分钟前
STL库——map/set(类函数学习)
开发语言·c++·学习
咔咔一顿操作39 分钟前
【CSS 3D 交互】打造沉浸式 3D 照片墙:结合 JS 实现拖拽交互
前端·javascript·css·3d·交互·css3
我命由我1234541 分钟前
Excel 表格 - Excel 减少干扰、专注于内容的查看方式
学习·ui·excel·photoshop·表格·ps·美工
我命由我1234543 分钟前
Excel 表格 - Excel 单元格添加边框
学习·ui·excel·课程设计·photoshop·ps·美工
用户4582031531743 分钟前
Flexbox布局上手:10分钟告别垂直居中难题
前端·css
easy20201 小时前
从机器学习的角度实现 excel 中趋势线:揭秘梯度下降过程
笔记·机器学习·线性回归
霸气小男1 小时前
解决React中通过外部引入的css/scss/less文件更改antDesign中Modal组件内部的样式不生效问题
css·react.js