11.CSS3的媒介(media)查询

CSS3 的媒介(media)查询

经典真题

  • 如何使用媒体查询实现视口宽度大于 320px 小于 640pxdiv 元素宽度变成 30%

媒体查询

媒体查询英文全称 Media Query,顾名思义就是会查询用户所使用的媒体或者媒介。

在现在,网页的浏览终端是越来越多了。用户可以通过不同的终端来浏览网页,例如:PC,平板电脑,手机,电视等。尽管我们无法保证一个网站在不同屏幕尺寸和不同设备上看起来一模一样,但是至少要让我们的Web页面能适配用户的终端。

CSS3 中的 Media Query (媒体查询)模块就是用来让一个页面适应不同的终端的。

Media Type 设备类型

首先我们来认识一下 CSS 中所支持的媒体类型。

CSS2 中常碰到的就是 all(全部)、screen(屏幕)和 print(页面打印或打印预览模式)。然而媒体的类型其实远不止这 3 种。

W3C 中共列出了 10 种媒体类型,如下表所示:

设备类型
All所有设备
Braille盲人用点字法触觉回馈设备
Embossed盲文打印机
Handheld便携设备
Print打印用纸或打印预览视图
Projection各种投影设备
Screen电脑显示器
Speech语音或音频合成器
Tv电视机类型设备
Tty使用固定密度字母栅格的媒介,比如电传打字机和终端

当然,虽然上面的表列出来了这么多,但是常用的也就是 all(全部)、screen(屏幕)和 print(页面打印或打印预览模式)这三种媒体类型。

媒体类型引用方法

引用媒体类型的方法有和很多,常见的媒体类型引用方法有:link 标签、xml 方式、@importCSS3 新增的 @media

  1. link 方法

link 方法引入媒体类型其实就是在 link 标签引用样式的时候,通过 link 标签中的 media 属性来指定不同的媒体类型,如下:

<link rel="stylesheet" href="index.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />
  1. xml 方式

xml 方式和 link 方式比较相似,也是通过 media 属性来指定,如下:

<? xml-stylesheet rel="stylesheet" media="screen" href="style.css" ?>
  1. @import

@import 引入媒体类型主要有两种方式,一种是在 CSS 样式表中通过 @import 调用另一个样式文件,另外一种是在 style 标签中引入。

注意:IE6IE7 中不支持该方式

在样式文件中引入媒体类型:

@import url('./index.css') screen

style 标签中引入媒体类型:

<style>@import url('./index.css') screen
</style>
  1. @meida 的方式

@mediaCSS3 中新引进的一个特性,称为媒体查询。@media 引入媒体也有两种方式,如下:

在样式文件中引入媒体类型:

@media screen{/* 具体样式 */
}

style 标签中引入媒体类型:

<style>@media screen{/* 具体样式 */}
</style>

虽然上面介绍了 4 种引入方式,但是最常见的就是第 1 种和第 4 种。

媒体查询具体语法

接下来我们来看一下媒体查询的具体语法。

这里我们可以将 Media Query 看成一个公式:

Media Type(判断条件)+ CSS(符合条件的样式规则)

这里举例如下:

link 的方式

<link rel="stylesheet" media="screen and (max-width:600px)" href="style.css" />

@media 的方式

@meida screen and (max-width:600px){/* 具体样式 */
}

上面的两个例子中都是使用 width 来进行的样式判断,但是实际上还有很多特性都可以被用来当作样式判断的条件。

具体如下表:

image-20240222091235937

有了 Media Query,我们能在不同的条件下使用不同的样式,使页面在不同的终端设备下达到不同的渲染效果。

这里有一个具体的公式如下:

@media 媒体类型 and (媒体特性) {/* 具体样式 */
}

来看几个具体示例。

  1. 最大宽度 max-width

该特性是指媒体类型小于或等于指定宽度时,样式生效,例如:

@media screen and (max-width:480px) {/* 具体样式 */
}

当屏幕宽度小于或等于 480px 时,样式生效

  1. 最小宽度 min-width

该特性和上面相反,及媒体类型大于或等于指定宽度时,样式生效,例如:

@media screen and (min-width:480px) {/* 具体样式 */
}

当屏幕宽度大于或等于 480px 时,样式生效

  1. 多个媒体特性混合使用

当需要多个媒体特性时,使用 and 关键字将媒体特性结合在一起,例如:

@media screen and (min-width:480px) and (max-width:900px){/* 具体样式 */
}

当屏幕大于等于 480px 并且小于等于 900px 时,样式生效。

  1. 设备屏幕的输出宽度 Device Width

在智能设备上,例如 iphone、ipad 等,可以通过 min-device-widthmax-device-width 来设置媒体特性,例如:

@media screen and (max-device-height:480px) {/* 具体样式 */
}

在智能设备上,当屏幕小于等于 480px 时样式生效

  1. not 关键字

not 关键词可以用来排除某种制定的媒体特性,示例如下:

@media not print and (max-width:900px) {/* 具体样式 */
}

样式代码将被用于除了打印设备和屏幕宽度小于或等于 900px 的所有设备中。

  1. 未指明 Media Type

如果在媒体查询中没有明确的指定 Media Type,那么其默认值为 all

@media (max-width: 900px){/* 具体样式 */
}

上面的样式适用于屏幕尺寸小于或等于 900px 的所有设备。

更多关于媒体查询的内容可以参阅 MDNhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries

真题解答

  • 如何使用媒体查询实现视口宽度大于 320px 小于 640pxdiv 元素宽度变成 30%

参考答案:

@media screen and (min-width: 320px) and (max-width: 640px){div{width: 30%;}
}

-EOF-

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

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

相关文章

C++:string类

标准库中的string类 string类 1. 字符串是表示字符序列的类 2. 标准的字符串类提供了对此类对象的支持&#xff0c;其接口类似于标准字符容器的接口&#xff0c;但添加了专门用于操作单字节字符字符串的设计特性。 3. string类是使用char(即作为它的字符类型&#xff0c;使用…

ChatGPT 是什么

文章目录 一、ChatGPT 是什么二、ChatGPT的发明者三、ChatGPT的运作方式四、ChatGPT的技术五、ChatGPT的优势六、ChatGPT的局限性七、ChatGPT的应用八、ChatGPT的未来九、总结 一、ChatGPT 是什么 OpenAI的ChatGPT&#xff0c;即Chat Generative Pre-Trained Transformer&…

3个精美的wordpress企业网站模板

WordPress企业网站模板 https://www.zhanyes.com/qiye/6305.html WordPress企业官网模板 https://www.zhanyes.com/qiye/6309.html WordPress律师模板 https://www.zhanyes.com/qiye/23.html

SQL注入漏洞解析--less-2

首先我们进入第二关 思路&#xff1a; 1.先判断是什么类型的注入 2.根据类型我们在找注入点 步骤&#xff1a; 1.提示我们输入id数字&#xff0c;那我们先输入1猜一下 2.这里正常回显&#xff0c;当我们后边加上时可以看到报错&#xff0c;且报错信息看不到数字&#xff0…

轻松掌握opencv的8种图像变换

文章目录 opencv的8种图像变换1. 图像放大、缩小2. 图像平移3. 图像旋转4. 图像仿射变换5. 图像裁剪6. 图像的位运算&#xff08;AND, OR, XOR&#xff09;7. 图像的分离和融合8. 图像的颜色空间 opencv的8种图像变换 1. 图像放大、缩小 我们先看下原图 import cv2 import ma…

基于java+springboot+vue实现的美食信息推荐系统(文末源码+Lw)23-170

1 摘 要 使用旧方法对美食信息推荐系统的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在美食信息推荐系统的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次开发…

Shell好用的工具: cut

目标 使用cut可以切割提取指定列\字符\字节的数据 介绍 cut 译为“剪切, 切割” , 是一个强大文本处理工具&#xff0c;它可以将文本按列进行划分的文本处理。cut命令逐行读入文本&#xff0c;然后按列划分字段并进行提取、输出等操作。 语法 cut [options] filename opti…

树中枝繁叶茂:探索 B+ 树、B 树、二叉树、红黑树和跳表的世界

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 树中枝繁叶茂&#xff1a;探索 B 树、B 树、二叉树、红黑树和跳表的世界 前言B树和B树B树&#xff08;Binary Tree&#xff09;&#xff1a;B树&#xff08;B Plus Tree&#xff09;&#xff1a;应用场…

STM32Cubemx TB6612直流电机驱动

一、TB6612FNG TB6612是一个支持双电机的驱动模块&#xff0c;支持PWM调速。PWMA、AIN1、AIN2 为一组控制引脚&#xff0c;PWMA 为 PWM 速度控制引脚&#xff0c;AIN1、AIN2 为方向控制引脚&#xff1b;PWMB、BIN1、BIN2 为一组控制引脚&#xff0c;PWMB 为 PWM 速度控制引脚&…

【力扣hot100】刷题笔记Day11

前言 科研不顺啊......又不想搞了&#xff0c;随便弄弄吧&#xff0c;多花点时间刷题&#xff0c;今天开启二叉树&#xff01; 94. 二叉树的中序遍历 - 力扣&#xff08;LeetCode&#xff09; 递归 # 最简单递归 class Solution:def inorderTraversal(self, root: TreeNode) …

idea运行项目时右下角弹出“Lombok requires enabled annotation processing”

文章目录 错误描述原因分析解决方式参考 错误描述 Lombok requires enabled annotation processing&#xff1a;翻译过来就是Lombok 需要启用注释处理 原因分析 idea安装了Lombok插件&#xff0c;但有些设置未做。 解决方式 参考 idea配置和使用Lombok

【FPGA】高云FPGA之数字钟实验->HC595驱动数码管

高云FPGA之IP核的使用 1、设计定义2、设计输入2.1 数码管译码显示2.2 74HC595驱动2.3 主模块设计 3、分析和综合4、功能仿真6.1 hex8模块仿真6.2 HC595模块 5、布局布线6、时序仿真7、IO分配以及配置文件&#xff08;bit流文件&#xff09;的生成8、配置&#xff08;烧录&#…

代码检测规范和git提交规范

摘要&#xff1a;之前开发的项目&#xff0c;代码检测和提交规范都是已经配置好的&#xff0c;最近自己新建的项目就记录下相关配置过程。 1. ESlint配置 2013年6月创建开源项目&#xff0c;提供一个插件化的JavaScript代码检测工具&#xff0c;创建项目是生成的eslintrc.js文…

【算法分析与设计】

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中数字位…

如何使用Express框架构建一个简单的Web应用

在这个数字化时代&#xff0c;Web应用的需求越来越多样化和复杂化。在前端开发领域&#xff0c;Express框架作为一个快速、灵活的Node.js Web应用程序框架&#xff0c;拥有强大的功能和丰富的生态系统&#xff0c;深受开发者们的青睐。本篇博客将带您一步步探索如何使用Express…

Bert基础(四)--解码器(上)

1 理解解码器 假设我们想把英语句子I am good&#xff08;原句&#xff09;翻译成法语句子Je vais bien&#xff08;目标句&#xff09;。首先&#xff0c;将原句I am good送入编码器&#xff0c;使编码器学习原句&#xff0c;并计算特征值。在前文中&#xff0c;我们学习了编…

代码随想录算法训练营第四十天|343. 整数拆分、96. 不同的二叉搜索树。

343. 整数拆分 题目链接&#xff1a;整数拆分 题目描述&#xff1a; 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 。 解题思路&#xff1a; 1、确定dp数组…

flink内存管理,设置思路,oom问题,一文全

flink内存管理 1 内存分配1.1 JVM 进程总内存&#xff08;Total Process Memory&#xff09;1.2 Flink 总内存&#xff08;Total Flink Memory&#xff09;1.3 JVM 堆外内存&#xff08;JVM Off-Heap Memory&#xff09;1.4 JVM 堆内存&#xff08;JVM Heap Memory&#xff09;…

运维的利器–监控–zabbix–第二步:建设–部署zabbix agent

文章目录 监控客户端部署及添加主机一、在 zabbix-server 安装客户端二、在本机和其他linux主机安装zabbix agent客户端1、安装2、配置3、启动并开机自启4、添加主机创建主机组创建主机等一会或重启zabbix-server查看配置是否成功 三、在其他windows上安装zabbix agent客户端下…

主流的开发语言和开发环境介绍

个人浅见&#xff0c;不喜勿喷&#xff0c;谢谢 软件开发是一个涉及多个方面的复杂过程&#xff0c;其中包括选择合适的编程语言和开发环境。编程语言是软件开发的核心&#xff0c;它定义了程序员用来编写指令的语法和规则。而开发环境则提供了编写、测试和调试代码的工具和平台…