重拾CSS,前端样式精读-媒体查询

news2024/11/21 19:26:40

前言

本文收录于CSS系列文章中,欢迎阅读指正

说到媒体查询,大家首先想到的可能是有关响应式的知识点,除此之外,它还可以用于条件加载资源,字体大小,图像和视频的优化,用户界面调整等等方面,学好媒体查询可以为页面增添条件样式,应对不同的设备类型。它是基于CSS2中的@media规则扩展而来,在CSS3中增加了特性查询的能力,使得它更加灵活和强大。

语法

媒体查询的起源

媒体查询发展到现在已经有五个版本,其中1-3版都被css2及更早版本支持,当前正处于第五版(截止目前第四版文档最后编辑时间是24年2月)

早期版本的媒体查询规则也允许你根据媒体类型应用不同的样式,与CSS3相比,CSS2中的@media规则较为简单,主要关注于媒体类型的区分,并没有引入复杂的表达式和特性查询。

基本语法如下

@media mediatype {
/* CSS rules */
}

mediatype是指定的媒体类型:

  1. all - 适用于所有设备
  2. aural - 专为语音和音频合成器设计(目前已弃用)
  3. braille - 用于盲文触觉反馈设备(目前已弃用​​​​​​​)
  4. handheld - 适合小型的手持设备(目前已弃用​​​​​​​)
  5. print - 目标为打印文档或打印预览
  6. projection - 适用于演示,如投影仪(目前已弃用​​​​​​​)
  7. screen - 主要指色彩电脑屏幕
  8. tty - 用于使用固定间距的字母网格显示的媒介,如电传打字机和终端(目前已弃用​​​​​​​)
  9. tv - 适用于电视类型的设备(目前已弃用​​​​​​​)
@media print {
    .box {
        border: 1px solid #000;
    }
}

@media screen {
    .box {
        border-radius: 50%;
    }
}

使用@import语法同样可以限制引入对应查询条件的标签

@import url("fineprint.css") print;
@import "common.css" screen, projection;

此外CSS2中的@media效果还可以通过使用<style>,<link>,<source>等标签中的media属性来实现

<link rel="stylesheet" media="print" href="./print.css">
<link rel="stylesheet" media="screen" href="./screen.css">

上述代码中当打印状态下就会引用print.css文件,在普通浏览器中会引入screen.css的内容

CSS3的媒体查询

回到现代CSS中的媒体查询语法,它不仅扩充了媒体类型还在原有类型的基础上增加了媒体的特点以及一些组合语法,如:如视口宽度、设备朝向等

基本语法

@media not|only mediatype and (expressions) {
  /* CSS规则 */
}

媒体特征

媒体特征用于描述设备的各种属性,例如屏幕尺寸、方向、分辨率等,常用的媒体特征如下:

  • width/height:视口宽度和高度。
  • min-width/max-width:最小和最大视口宽度。
  • min-height/max-height:最小和最大视口高度。
  • orientation:设备方向,可以是landscape(横向)或portrait(纵向)。
  • resolution:输出设备的分辨率。
  • aspect-ratio:视口的宽高比。
  • color:可用的颜色数。
  • color-index:设备的色彩索引表中的颜色数。
  • monochrome:单色帧缓冲中每像素的位数。

更多媒体特征参照@media - CSS:层叠样式表 | MDN

来看看它的用法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@media</title>
</head>
<style>
    .box,
    .box2 {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
    }

    @media (min-width: 900px) {
        .box {
            background: lightcoral;
        }
    }

    @media (hover: hover) {
        .box2:hover {
            background: yellow;
        }
    }
</style>

<body>
    <div class="box">box</div>
    <div class="box2">box2</div>
</body>

</html>

上述代码表示视窗大于900时box会改变颜色,当当前设备支持hover功能时,box2的hover生效

逻辑运算

与CSS选择器类似,媒体查询同样支持条件组合的逻辑运算,在媒体特征,媒体类型之间使用not、and、only和or(四版本之前使用的是逗号 , )关键字可以达到组合查询的效果。

not

用于排除某些媒体或条件,同js的!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>not</title>
</head>
<style>
    .box {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background: lightcoral;
    }

    @media not print {
        .box {
            background: navy;
            color: white;
        }
    }

    @media not (min-width: 900px) {
        .box {
            background: lightblue;
        }
    }
</style>

<body>
    <div class="box">box</div>
</body>

</html>

上述代码非打印页面背景切换navy和非宽度大于(小于等于)900px背景为亮蓝。当二者都满足则遵循css样式规则,后面的属性覆盖前面的属性,看看效果:

and

用于组合多个条件的逻辑操作符,同js的&&

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>and</title>
</head>
<style>
    .box {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background: lightcoral;
    }

    @media screen and (min-width: 800px) and (max-width: 1024px) {

        /* 视口宽度在800到1024像素之间的屏幕上应用这些样式 */
        .box {
            background-color: lightblue;
        }
    }

    @media screen and (min-width: 600px) and (max-width: 800px) {

        /* 视口宽度在600px到800px之间的屏幕上应用这些样式 */
        .box {
            background-color: lightgreen;
        }
    }
</style>

<body>
    <div class="box">box</div>
</body>

</html>

当窗口宽度在600-800显示绿色,800-1024显示蓝色,其余显示红色

or

表示可以选择多个媒体查询中的任意一个来应用样式,在媒体查询四版本之前一般使用逗号(,)表示该效果,类似与js中的||,思考下面的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>or</title>
</head>
<style>
    /* 其余600-800显示默认 */
    .box {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background: lightcoral;
    }

    @media (max-width: 600px) or (min-width: 800px) {

        /* 小于600或大于800生效 */
        .box {
            background-color: lightblue;
        }
    }

    @media (max-width: 400px),
    (min-width: 1000px) {

        /* 小于400或大于1000生效 */
        .box {
            background-color: lightgreen;
        }
    }
</style>

<body>
    <div class="box">box</div>
</body>

</html>

only

only关键字在CSS媒体查询中的作用是用来防止旧版浏览器误解和应用不支持的媒体查询,比如上面说到的css2中只支持媒体类型的写法,当我们要兼容旧浏览器又想使新版写法生效时可以使用only,思考下面一段代码

@media only screen and (min-width: 800px) and (max-width: 1024px)

当代码处于老版本浏览器时,and后面的条件都会失效变成以下代码

@media screen

​​​​​​​​​​​​​​总结

媒体查询​​​​​​​允许开发者为不同的媒体类型和条件编写特定的样式规则。通过使用媒体查询,可以创建响应式网页布局,确保网页可以适配多种不同尺寸和分辨率的设备,在实际应用中,媒体查询使得CSS样式可以根据不同的浏览环境动态地适应变化,从而提供跨设备的无缝用户体验。

感谢你看到这里,以上就是文章全部内容了,如果觉得文章不错的话,还请三连鼓励一下,你的支持就是我创作的最大动力,谢谢!

相关代码

myCode: 基于js的一些小案例或者项目 - Gitee.com

知识点参考

使用媒体查询 - CSS:层叠样式表 | MDN

媒体查询入门指南 - 学习 Web 开发 | MDN

Media Queries Level 4

Media Queries Level 3

语法参考

@media - CSS:层叠样式表 | MDN​​​​​​​

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

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

相关文章

物理设备命名规则(Linux网络服务器 15)

Linux系统中的一切都是文件&#xff0c;硬件设备也不例外。既然都是文件&#xff0c;就必须有文件名称。系统内核中udev设备管理器会自动把硬件名称规范化起来&#xff0c;目的是让用户通过设备文件的名字可以大致了解设备属性以及分区信息。这对于陌生的设备来说特别方便。另外…

NVIDIA NIM 开发者指南:入门

NVIDIA NIM 开发者指南&#xff1a;入门 NVIDIA 开发者计划 想要了解有关 NIM 的更多信息&#xff1f;加入 NVIDIA 开发者计划&#xff0c;即可免费访问任何基础设施云、数据中心或个人工作站上最多 16 个 GPU 上的自托管 NVIDIA NIM 和微服务。 加入免费的 NVIDIA 开发者计…

猿创征文|Inscode桌面IDE:打造高效开发新体验

猿创征文&#xff5c;Inscode桌面IDE&#xff1a;打造高效开发新体验 引言 在当今快速发展的软件开发领域&#xff0c;一个高效、易用的集成开发环境&#xff08;IDE&#xff09;是每个开发者必不可少的工具。Inscode 桌面 IDE 作为一款新兴的开发工具&#xff0c;凭借其强大…

力扣 LeetCode 142. 环形链表II(Day2:链表)

解题思路&#xff1a; 使用set判断是否重复添加&#xff0c;如果set加入不进去证明之前到达过该节点&#xff0c;有环 public class Solution {public ListNode detectCycle(ListNode head) {Set<ListNode> set new HashSet<>();ListNode cur head;while (cur …

激活函数解析:神经网络背后的“驱动力”

神经网络中的激活函数&#xff08;Activation Function&#xff09;是其运作的核心组件之一&#xff0c;它们决定了神经元如何根据输入信号进行“激活”&#xff0c;进而影响整个模型的表现。理解激活函数的工作原理对于设计和优化神经网络至关重要。本篇博客将深入浅出地介绍各…

基于表格滚动截屏(表格全部展开,没有滚动条)

import html2canvasPro from html2canvas // 截图&#xff0c;平辅表格 async function resetAgSize() {const allColumns gridApi.value.getColumns()let totalColumnWidth 0let totalColumnHeight 0// 遍历每一个行节点gridApi.value.forEachNode((rowNode) > {totalCo…

vs2015QT项目添加多语言翻译总结

一、简介 当软件有国际化的需求时&#xff0c;就需要多语言翻译功能&#xff0c;最常见的语言就是支持中文和英语&#xff0c;本文介绍在vs2015QT环境下&#xff0c;进行国际化翻译的具体流程。 二、多语言翻译实现流程 1.底层实现原理介绍 QT写的客户端软件&#xff0c;能…

wireshark演进之路——从GTK到Qt

Wireshark 自 1998 年诞生至今&#xff0c;已有超过26年的历史了。它最早由 Gerald Combs 创建&#xff0c;最初名为 Ethereal。2006 年&#xff0c;Ethereal 更名为 Wireshark&#xff0c;并继续发展成了全球领先且人尽皆知的网络协议分析工具&#xff0c;其GUI演变就是其中非…

哈希表的实现--C++

文章目录 一、哈希概念1.1、直接定址法1.2、哈希冲突1.3、负载因子1.4、将关键字转为整数1.5、哈希函数1.5.1、除法散列法/除留余数法1.5.2、乘法散列法1.5.3、全域散列法1.5.4、其他方法 二、处理哈希冲突2.1、开放定址法2.1.1、线性探测2.1.2、二次探测2.1.3、双重散列2.1.4、…

Python学习从0到1 day26 第三阶段 Spark ② 数据计算Ⅰ

人总是会执着于失去的&#xff0c;而又不珍惜现在所拥有的 —— 24.11.9 一、map方法 PySpark的数据计算&#xff0c;都是基于RDD对象来进行的&#xff0c;采用依赖进行&#xff0c;RDD对象内置丰富的成员方法&#xff08;算子&#xff09; map算子 功能&#xff1a;map算子…

D67【python 接口自动化学习】- python基础之数据库

day67 Python操作MySQL基础使用 学习日期&#xff1a;20241113 学习目标&#xff1a;MySQL数据库-- 136 Python操作MySQL基础使用 学习笔记&#xff1a; pymysql 创建MySQL的数据库链接 执行sql语句 总结 Python中使用第三方库&#xff1a;pymysql来操作MySQL&#xff0c;…

Linux驱动开发基础——Hello驱动程序(一)

目录 一、Hello驱动 一、Hello驱动 我们选用的内核都是 4.x 版本&#xff0c;操作都是类似的&#xff1a; 1.1、APP 打开的文件在内核中如何表示 open函数原型&#xff1a; int open(const char *pathname, int flags, mode_t mode); 仔细看函数的参数&#xff0c;再对比看 内…

2.初始sui move

vscode安装move插件 查看sui 客户端版本号 sui client --version 创建新项目 sui move new <项目名> sui move new hello_world 项目目录结构&#xff1a; hello_world ├── Move.toml ├── sources │ └── hello_world.move └── tests└── hello_world…

学习日志009--面向对象的编程

一、面向对象 面向对象编程&#xff08;Object-Oriented Programming&#xff0c;简称OOP&#xff09;是一种编程范式&#xff0c;它使用“对象”来设计应用程序和计算机程序。它利用了抽象、封装、继承和多态这些概念。 一、面向对象编程的核心概念 封装&#xff08;Encaps…

Redis8:商户查询缓存2

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…

在 WPF 中,如何实现数据的双向绑定?

在 WPF 中&#xff0c;数据绑定是一个非常重要的特性&#xff0c;它允许 UI 与数据源之间自动同步。双向绑定是一种常见的绑定方式&#xff0c;当数据源更新时&#xff0c;UI 会自动更新&#xff1b;同样&#xff0c;当 UI 中的元素&#xff08;如文本框&#xff09;发生改变时…

DAY6 线程

作业1&#xff1a; 多线程实现文件拷贝&#xff0c;线程1拷贝一半&#xff0c;线程2拷贝另一半&#xff0c;主线程回收子线程资源。 代码&#xff1a; #include <myhead.h> sem_t sem1; void *copy1()//子线程1函数 拷贝前一半内容 {int fd1open("./1.txt",O…

# filezilla连接 虚拟机ubuntu系统出错“尝试连接 ECONNREFUSED - 连接被服务器拒绝, 失败,无法连接服务器”解决方案

filezilla连接 虚拟机ubuntu系统出错“尝试连接 ECONNREFUSED - 连接被服务器拒绝&#xff0c; 失败&#xff0c;无法连接服务器”解决方案 一、问题描述&#xff1a; 当我们用filezilla客户端 连接 虚拟机ubuntu系统时&#xff0c;报错“尝试连接 ECONNREFUSED - 连接被服务…

网安数学基础-同余关系

文章目录 参考等价关系实例 同余同余和等价同余的运算 乘法逆元一次同余方程消去律 剩余类中国剩余定理欧拉函数欧拉定理 费马小定理 参考 【一口气学完】密码学的数学基础2&#xff0c;《同余关系》&#xff0c;一小时学完 等价关系 三角形里的全等关系 等价关系定义 下面这…

高校数字校园建设的数字身份管理难题

近年来&#xff0c;我国高等院校在《中国教育现代化2035》战略的要求下&#xff0c;在《高等学校数字校园建设规范&#xff08;试行&#xff09;》的指引下&#xff0c;掀起了数字校园建设高潮。借助教学、科研、管理、服务等种类的业务应用&#xff0c;高校提升了业务的数字化…