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

什么是响应式布局?

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

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

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

媒体查询

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

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

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

语法

媒体特征

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

一个案例弄懂书写顺序

需求

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

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

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

代码

<!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

媒体类型 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/844239.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AB实验人群定向HTE模型1 - Causal Tree

背景 论文给出基于决策树估计实验对不同用户的不同影响。并提出Honest&#xff0c;variance Penalty算法旨在改进CART在tree growth过程中的过拟合问题。 我们举个例子&#xff1a;科研人员想衡量一种新的降血压药对病人的效果&#xff0c;发现服药的患者有些血压降低但有些血…

机架式服务器是什么?

随着科学技术的快速发展&#xff0c;服务器的种类样式也变得多种多样了&#xff0c;其中根据服务器的外观来进行分类的有塔式服务器、刀片式服务器和机架式服务器多种类型&#xff0c;其中对于塔式服务器和刀片式服务器我们还是有一定的了解的&#xff0c;所以今天小编主要来带…

I2C协议详解

文章目录 概念工作模式 原理工作原理工作流程IIC协议的关键特点IIC通信过程 优点与缺点优点缺点 概念 IIC&#xff08;Inter-Integrated Circuit&#xff09;协议&#xff0c;也常被称为TWI&#xff08;Two-Wire Interface&#xff09;协议&#xff0c;是一种用于短距离通信的…

list常用接口模拟实现

文章目录 一、模拟list类的框架二、函数接口实现1、迭代器接口2、常用删除、插入接口3、常用其他的一些函数接口4、默认成员函数 一、模拟list类的框架 1、使用带哨兵的双向链表实现。 2、链表结点&#xff1a; // List的结点类 template<class T> struct ListNode {Li…

Python实现mysql基于配置文件的全自动增量数据备份

前言 在mysql备份或者高可用当中,常见的方式主要有NDBcluster集群,MGR组复制技术,Mycat+mysql分片存储技术(以上三种都可以在mysql专栏查看)以及主从备份。 在上述的几种方式中,所需要的机器及部署配置都是相当繁琐的,集群至少三台起步,对于一些小的备份场景下可能不…

卧式混料机:混合设备的智慧之选

卧式混料机&#xff0c;顾名思义&#xff0c;是一种采用卧式结构的混合设备。它的设计精巧&#xff0c;结构紧凑&#xff0c;不仅占用空间小&#xff0c;而且操作简便&#xff0c;维护方便。与传统的立式混料机相比&#xff0c;卧式混料机在混合效率、混合均匀度以及物料适应性…

DNS设置(linux)

1.配置dns需要现在/etc/sysconfig/network-scripts/目录下的ifcfg-ens33(后面数字也可能是其他的)中配置DNS 2.编辑/etc/resolv.conf文件&#xff0c;将上面网卡中加的dns服务器ip添加到此文件 vi /etc/resolv.conf重启网络配置 service network restart常用的dns的ip 国内…

香港优才计划申请时间要多久?各流程申请周期规划,再晚就来不及了!

香港优才计划申请时间要多久&#xff1f;各流程申请周期规划&#xff0c;再晚就来不及了&#xff01; 2024年是香港优才计划不限配额的最后一年&#xff0c;明年政策如何变化还未可知&#xff0c;但如果明年又设置限额了&#xff0c;那么今年最后的机会一定要抓住了。 在这里…

分享 - 树形dp

树形 d p dp dp 例1 - 基础 链接&#xff1a;树上子链 练手 分析 其实一看题就很显然的树形 d p dp dp子链在这里分为两种情况&#xff0c;如图黑链和红链 思路 d p [ i ] dp[i] dp[i] 表示以 i i i 开头的红链的最大权值易得&#xff1a; d p [ i ] m a x ( d p [ i…

Dice损失函数

Dice损失函数&#xff08;Dice Loss&#xff09;&#xff0c;也称为Dice系数损失或Srensen-Dice系数损失&#xff0c;是一种用于衡量两个集合相似度的指标&#xff0c;广泛应用于图像分割任务中。它的目标是最大化分割结果与真实标签之间的相似度。Dice损失函数基于Dice系数&am…

CE FDA注册相关标准:在线查看 下载

DICOM: View http://med nema.org/ 中文版&#xff1a;https://github.com/dicom-learning-group/dicom-standard-chinese/tree/master/Part01 发布历史&#xff1a;Approved Supplements

祝贺!阿里云PolarDB斩获数据库国际顶会ICDE 2024工业赛道最佳论文

5月17日消息&#xff0c;在荷兰举行的国际顶级数据库学术会议ICDE 2024上&#xff0c;阿里云斩获工业和应用赛道的“最佳论文奖”&#xff0c;这也是中国企业首次获此殊荣。阿里云PolarDB创新性地解决了数据库Serverless中跨机事务迁移的核心难题&#xff0c;将跨机迁移时间压缩…

智能客服:论小红书商家杀出重围的正确姿势!

小红书「起飞」密码 洞悉需求&#xff0c;主动应变 面对众多的互联网平台&#xff0c;选择一个合适的平台宣传自家的品牌&#xff0c;也是一门学问&#xff0c;从“遇事不决&#xff0c;小红书”&#xff0c;这一 slogan 就能精准地捕捉了用户搜索行为的新趋势。 在过去的十…

【C++奇妙冒险】拷贝构造函数、运算符重载(赋值重载|const成员|取地址重载|const取地址重载)

文章目录 前言&#x1f6a9;拷贝构造函数&#x1fae7;概念&#x1fae7;特征&#x1fae7;默认生成的拷贝构造&#x1fae7;default关键字&#xff08;浅谈&#xff09; &#x1f6a9;运算符重载&#x1fae7;概念&#x1fae7;运算符重载注意事项&#x1fae7;封装如何保证&a…

如何使用GPT-4o?如何使用 GPT-4o API?

如何使用GPT-4o&#xff1f; GPT-4o 也可以通过 ChatGPT 界面使用 如何使用 GPT-4o API 新的 GPT-4o 模型遵循 OpenAI 现有的聊天完成 API&#xff0c;使其向后兼容且易于使用。 ​ 如何升级GPT4Plus&#xff1f; 升级ChatGPTPLSU4需要一张虚拟卡&#xff0c;点击获取​​​…

JavaScript 中遍历数组的多种方法

在 JavaScript 中,遍历数组有很多种方法。根据不同的场景选择最合适的遍历方式,不仅能提高代码的可读性,还能提升性能。在这篇文章中,我们将详细介绍几种常见的遍历数组的方法及其优缺点。 推荐方法: for-of 循环(ES2015+):简单且支持 async。 for (const element of t…

ClickHouse 分布式部署、分布式表创建及数据迁移指南

文章目录 部署 ClickHouse 集群1.1 环境准备1.2 安装 ClickHouse1.3 配置集群 创建分布式表2.1 创建本地表2.2 创建分布式表2.3 删除分布式表 测试分布式表3.1 插入测试数据。 配置和管理4.1 配置监控4.2 数据备份 数据迁移5.1 导出5.2 导入 部署 ClickHouse 集群 Quantum Ins…

算法刷题笔记 差分(C++实现)

文章目录 差分概述题目描述解题思路实现代码 差分概述 在我的博文 算法刷题笔记 前缀和和 算法刷题笔记 子矩阵的和 中&#xff0c;曾介绍了前缀和算法。前缀和是指对于一个原始数组&#xff0c;我们构建一个含有相同元素个数的辅助数组&#xff0c;其中辅助数组的下标为i的元…

Java(六)——抽象类与接口

文章目录 抽象类和接口抽象类抽象类的概念抽象类的语法抽象类的特性抽象类的意义 接口接口的概念接口的语法接口的特性接口的使用实现多个接口接口与多态接口间的继承抽象类和接口的区别 抽象类和接口 抽象类 抽象类的概念 Java使用类实例化对象来描述现实生活中的实体&…

【第一节】从C语言到C++

目录 一、面向对象编程 1.早期概念 2.发展与普及 3. 现代发展 二、从C语言到C 1.关于堆内存的使用 2.关于函数重载 3.关于默认参数 4.引用 5.引用参数 6.作用域符号 三、C的输入输出机制 一、面向对象编程 面向对象编程&#xff08;Object-Oriented Programming&am…