CSS3媒体查询与页面自适应
2017年9月,W3C发布媒体查询(Media Query Level 4)候选推荐标准规范,它扩展了已经发布的媒体查询的功能。该规范用于CSS的@media规则,可以为文档设定特定条件的样式,也可以用于HTML、JavaScript等语言。
1、媒体查询基础
媒体查询可以根据设备特性,如屏幕宽度、高度、设备方向(横向或纵向),为设备定义独立的CSS样式表。一个媒体查询由一个可选的媒体类型和零个或多个限制范围的表达式组成,如宽度、高度和颜色。
1.1、媒体类型和媒体查询
CSS2提出媒体类型(Media Type)的概念,它允许为样式表设置限制范围的媒体类型。例如,仅供打印的样式表文件、仅供手机渲染的样式表文件、仅供电视渲染的样式表文件等,具体说明如下表所示:
通过HTML标签的media属性定义样式表的媒体类型,具体方法如下:
- 定义外部样式表文件的媒体类型。
<link href="csss.css" rel="stylesheet" type="text/css" media="handheld" />
- 定义内部样式表文件的媒体类型。
<style type="text/css" media="screen"> ... </style>
CSS3在媒体类型的基础上,提出了Media Queries(媒体查询)的概念。媒体查询比CSS2的媒体类型功能更加强大、更加完善。两者的主要区别:媒体查询是一个值或一个范围的值,而媒体类型仅仅是设备的匹配。媒体类型可以帮助用户获取以下数据。 - 浏览器窗口的宽和高。
- 设备的宽和高。
- 设备的手持方向,横向还是竖向。
- 分辨率。
例如,下面这条导入外部样式表的语句:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
在media属性中设置媒体查询的条件(max-width: 600px):当屏幕宽度小于或等于600px时,则调用small.css样式表渲染页面。
1.2、使用@media
CSS3使用@media规则定义媒体查询,简化语法格式如下:
@media [only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*{/* CSS样式列表 */}
参数简单说明如下:
<media_type>
:指定媒体类型,具体说明参考上表所示。<expression>
:指定媒体特性。放在一对圆括号中,如(min-width:400px)。- 逻辑运算符,如and(逻辑与)、not(逻辑否)、only(兼容设备)等。
媒体特性包括13种,接收单个的逻辑表达式作为值,或者没有值。大部分特性接收min或max的前缀,用来表示大于等于或者小于等于的逻辑,以此避免使用大于号(>)和小于号(<)字符。
在CSS样式的开头必须定义@media关键字,然后指定媒体类型,再指定媒体特性。媒体特性的格式与样式的格式相似,分为两部分,由冒号分隔,冒号前指定媒体特性,冒号后指定该特性的值。
【示例1】下面语句指定了当设备显示屏幕宽度小于640px时所使用的样式:
@media screen and (max-width: 639px) {/*样式代码*/}
【示例2】可以使用多个媒体查询将同一个样式应用于不同的媒体类型和媒体特性中,媒体查询之间通过逗号分隔,类似于选择器分组:
@media handheld and (min-width:360px),screen and (min-width:480px) {/*样式代码*/}
【示例3】可以在表达式中加上not、only和and等逻辑运算符:
//下面样式代码将被使用在除便携设备之外的其他设备或非彩色便携设备中@media not handheld and (color) {/*样式代码*/}//下面样式代码将被使用在所有非彩色设备中@media all and (not color) {/*样式代码*/}
【示例4】only运算符能够让不支持媒体查询,但是支持媒体类型的设备,将忽略表达式中的样式。例如:
@media only screen and (color) {/*样式代码*/}
对于支持媒体查询的设备来说,能够正确地读取其中的样式,仿佛only运算符不存在一样;对于不支持媒体查询,但支持媒体类型的设备(如IE8)来说,可以识别@media screen关键字,但是由于先读取的是only运算符,而不是screen关键字,将忽略这个样式。
提示:媒体查询也可以用在@import规则和标签中。例如:
@import url(example.css) screen and (width:800px);//下面代码定义了如果页面通过屏幕呈现,且屏幕宽度不超过480px,则加载shetland.css样式表<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
1.3、应用@media
【示例1】and运算符用于符号两边规则均满足条件的匹配。
@media screen and (max-width : 600px) {/*匹配宽度小于等于600px的屏幕设备*/}
【示例2】not运算符用于取非,即所有不满足该规则的均匹配。
@media not print {/*匹配除了打印机以外的所有设备*/}
注意:not仅应用于整个媒体查询:
@media not all and (max-width : 500px) {}/*等价于*/@media not (all and (max-width : 500px)) {}/*而不是*/@media (not all) and (max-width : 500px) {}
在逗号媒体查询列表中,not仅会否定它所在的媒体查询,而不影响其他的媒体查询。
如果在复杂的条件中使用not运算符,要显式添加小括号,避免歧义。
【示例3】,(逗号)相当于or运算符,用于两边有一条满足则匹配:
@media screen , (min-width : 800px) {/*匹配屏幕或者宽度大于等于800px的设备*/}
【示例4】在媒体类型中,all是默认值,匹配所有设备:
@media all {/*可以过滤不支持media的浏览器*/}
常用的媒体类型有screen匹配屏幕显示器、print匹配打印输出。
【示例5】使用媒体查询时,必须加括号,一个括号就是一个查询:
@media (max-width : 600px) {/*匹配界面宽度小于等于600px的设备*/}@media (min-width : 400px) {/*匹配界面宽度大于等于400px的设备*/}@media (max-device-width : 800px) {/*匹配设备(不是界面)宽度小于等于800px的设备*/}@media (min-device-width : 600px) {/*匹配设备(不是界面)宽度大于等于600px的设备*/}
提示:在设计手机网页时,应该使用device-width/device-height,因为手机浏览器默认会对页面进行一些缩放,如果按照设备的宽、高进行匹配,会更接近预期的效果。
【示例6】媒体查询允许相互嵌套,这样可以优化代码,避免冗余:
@media not print {/*通用样式*/@media (max-width:600px) {/*此条匹配宽度小于等于600px的非打印机设备 */}@media (min-width:600px) {/*此条匹配宽度大于等于600px的非打印机设备 */}}
【示例7】在设计响应式页面时,用户应该根据实际需要,先确定自适应分辨率的阀值,也就是页面响应的临界点:
@media (min-width: 768px){/* >=768px的设备 */}@media (min-width: 992px){/* >=992px的设备 */}@media (min-width: 1200){/* >=1200px的设备 */}
注意:下面样式顺序是错误的,因为后面的查询范围将覆盖前面的查询范围,导致前面的媒体查询失效。
@media (min-width: 1200){ }@media (min-width: 992px){ }@media (min-width: 768px){ }
因此,当我们使用min-width媒体特性时,应该按从小到大的顺序设计各个阀值。同理如果使用max-width时,就应该按从大到小的顺序设计各个阀值。
@media (max-width: 1199){/* <=1199px的设备 */}@media (max-width: 991px){/* <=991px的设备 */}@media (max-width: 767px){/* <=768px的设备 */}
【示例8】用户可以创建多个样式表,以适应不同媒体类型的宽度范围。当然,更有效率的方法是将多个媒体查询整合在一个样式表文件中,这样可以减少请求的数量:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {/*样式列表 */}@media only screen and (min-width : 321px) {/*样式列表 */}@media only screen and (max-width : 320px) {/*样式列表 */}
【示例9】如果从资源的组织和维护的角度考虑,可以选择使用多个样式表的方式实现媒体查询,这样做更高效。
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /><link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" /><link rel="stylesheet" media="print" href="print.css" />
【示例10】使用orientation属性可以判断设备屏幕当前是横屏(值为landscape)还是竖屏(值为portrait)。
@media screen and (orientation: landscape) {.iPadLandscape {width: 30%;float: right;}}@media screen and (orientation: portrait) {.iPadPortrait {clear: both;}}
不过,orientation属性只在iPad上有效,对于其他可以转屏的设备(如iPhone),可以使用min-device-width和max-device-width变通实现。
【扩展】媒体查询仅是一种纯CSS方式实现响应式Web设计的方法,也可以使用JavaScript库来实现同样的设计。例如,下载css3-mediaqueries.js(http://code.google.com/p/css3-mediaqueries-js/),然后在页面中调用。对于老式浏览器(如IE6、IE7、IE8)可以考虑使用css3-mediaqueries.js兼容。
<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>
【示例11】演示使用jQuery检测浏览器宽度,并为不同的视口调用不同的样式表。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$(window).bind("resize", resizeWindow);function resizeWindow(e){var newWindowWidth = $(window).width();if(newWindowWidth < 600){$("link[rel=stylesheet]").attr({href : "mobile.css"});}else if(newWindowWidth > 600){$("link[rel=stylesheet]").attr({href : "style.css"});}}});</script>
2、案例实战
2.1、判断显示屏幕宽度
下面示例演示如何正确使用@media规则,判断当前视口宽度位于什么范围。示例代码如下:
<style type="text/css">.wrapper { /* 定义测试条的样式 */padding: 5px 10px; margin: 40px;text-align:center; color:#999;border: solid 1px #999;}.viewing-area span { /* 默认情况下隐藏提示文本信息 */color: #666;display: none;}/* 应用于移动设备,且设备最大宽度为480px */@media screen and (max-device-width: 480px) {.a { background: #ccc;}}/* 显示屏幕宽度小于等于600px */@media screen and (max-width: 600px) {.b {background: red; color:#fff;border: solid 1px #000;}span.lt600 { display: inline-block; }}/* 显示屏幕宽度介于600~900px */@media screen and (min-width: 600px) and (max-width: 900px) {.c {background: red; color:#fff;border: solid 1px #000;}span.bt600-900 { display: inline-block; }}/* 显示屏幕宽度大于等于900px */@media screen and (min-width: 900px) {.d {background: red; color:#fff;border: solid 1px #000;}span.gt900 { display: inline-block; }}</style><div class="wrapper a">设备最大宽度为480px。</div><div class="wrapper b">显示屏幕宽度小于等于600px </div><div class="wrapper c">显示屏幕宽度介于600~900px</div><div class="wrapper d">显示屏幕宽度大于等于900px </div><p class="viewing-area"><strong>当前显示屏幕宽度:</strong><span class="lt600">小于等于600px</span><span class="bt600-900">介于600~900px</span><span class="gt900">大于等于900px</span></p>
示例设计当显示屏幕宽度小于等于600px时,则高亮显示<div class="wrapper b">
测试条,并在底部显示提示信息:小于等于600px;当显示屏幕宽度介于600~900px时,则高亮显示<div class="wrapper c">
测试条,并在底部显示提示信息:介于600~900px;显示屏幕宽度大于等于900px时,则高亮显示<div class="wrapper d">
测试条,并在底部显示提示信息:大于等于900px;当设备宽度小于等于480px时,则高亮显示<div class="wrapper a">
测试条。
2.2、设计响应式版式
本案例在页面中设计3个栏目。
<div id="main">
:主要内容栏目。<div id="sub">
:次要内容栏目。<div id="sidebar">
:侧边栏栏目。
构建的页面结构如下:
<div id="container"><div id="wrapper"><div id="main"><h1>水调歌头·明月几时有</h1><h2>苏轼</h2><p>……</p></div><div id="sub"><h2>宋词精选</h2><ul><li>……</li></ul></div></div><div id="sidebar"><h2>词人列表</h2><ul><li>……</li></ul></div></div>
设计页面能够自适应屏幕宽度,呈现不同的版式布局。当显示屏幕宽度在999px以上时,让3个栏目并列显示;当显示屏幕宽度在639px以上、1000px以下时,设计两栏目显示;当显示屏幕宽度在640px以下时,让3个栏目堆叠显示。
<style type="text/css">/* 默认样式 *//* 网页宽度固定,并居中显示 */#container { width: 960px; margin: auto;}/*主体宽度 */#wrapper {width: 740px; float: left;}/*设计3栏并列显示*/#main {width: 520px; float: right;}#sub { width: 200px; float: left;}#sidebar { width: 200px; float: right;}/* 窗口宽度在999px以上 */@media screen and (min-width: 1000px) {/* 3栏显示*/#container { width: 1000px; }#wrapper { width: 780px; float: left; }#main {width: 560px; float: right; }#sub { width: 200px; float: left; }#sidebar { width: 200px; float: right; }}/* 窗口宽度在639px以上、1000px以下 */@media screen and (min-width: 640px) and (max-width: 999px) {/* 2栏显示 */#container { width: 640px; }#wrapper { width: 640px; float: none; }.height { line-height: 300px; }#main { width: 420px; float: right; }#sub {width: 200px; float: left; }#sidebar {width: 100%; float: none; }}/* 窗口宽度在640px以下 */@media screen and (max-width: 639px) {/* 1栏显示 */#container { width: 100%; }#wrapper { width: 100%; float: none; }#main {width: 100%; float: none; }#sub { width: 100%; float: none; }#sidebar { width: 100%; float: none; }}</style>
当显示屏幕宽度在999px以上时,3栏并列显示,预览效果如下图:
相关文章:

CSS3媒体查询与页面自适应
2017年9月,W3C发布媒体查询(Media Query Level 4)候选推荐标准规范,它扩展了已经发布的媒体查询的功能。该规范用于CSS的media规则,可以为文档设定特定条件的样式,也可以用于HTML、JavaScript等语言。 1、媒体查询基础 媒体查询…...

UG\NX二次开发 超长的对象属性值,怎么设置
文章作者:里海 来源网站:里海NX二次开发3000例专栏 感谢粉丝订阅 感谢 Dr. Lin 订阅本专栏,非常感谢。 简介 使用UF_ATTR_assign设置对象属性,如果属性值超过UF_ATTR_MAX_STRING_LEN则会报错。 #define UF_ATTR_MAX_STRING_LEN 132 怎么办呢?下面这种方法可以解决: 效果 …...

流媒体服务实现H5实时预览视频
目录 背景方案业务实践细节注意 待办 背景 客户aws服务磁盘存储告急,最高可扩容16T。排查如下:主要是视频文件存在大量复制使用的情况。例如发布节目时复制、预览时复制,这样上传一份视频后最大会有四份拷贝(预览、普通发布、互动…...

C++适配器
文章目录 引言栈和队列 priority_queue仿函数迭代器区间 引言 栈的特性是先进后出,队列的特性是先进先出,然而双向队列同时具有栈和队列的特性,所以我们可以通过双向队列来适配出栈和队列。 先看库里面 栈和队列 stack和queue模板参数里面都…...

基于openresty waf二次开发多次匹配到的ip再做拉黑
我们想在openresty waf的基础上做二次开发,比如再精确一些。比如我们先匹配到了select的url我们先打分10分,匹配到cc 1000/s我们再给这个ip打10分…直到100分我们就拉黑这个ip。 [openresty waf][1] #cat reids_w.lua require lib local redis require…...

新一代构建工具Vite-xyphf
一、什么vite? vite:是一款思维比较前卫而且先进的构建工具,他解决了一些webpack解决不了的问题——在开发环境下可以实现按需编译,加快了开发速度。而在生产环境下,它使用Rollup进行打包,提供更好的tree-shaking、代码压缩和性能优化&…...
Flink源码解析三之执行计划⽣成
JobManager Leader 选举 首先flink会依据配置获取RecoveryMode,RecoveryMode一共两两种:STANDALONE和ZOOKEEPER。 如果用户配置的是STANDALONE,会直接去配置中获取JobManager的地址如果用户配置的是ZOOKEEPER,flink会首先尝试连接zookeeper,利用zookeeper的leadder选举服务发现…...
Flutter 常见错误记录总结
1、当 flutter pub get 指令报如下错误时: pub get failed command: "/Users/***/developer/flutter/bin/cache/dart-sdk/bin/dart __deprecated_pub --color --directory . get --example" pub env: { "FLUTTER_ROOT": "/Users/***/dev…...

[ASP]校无忧在线报名系统 v2.1
校无忧在线报名系统为了满足各地不同的报名人员的需求,为提供更为高效、方便、快捷的报名条件,同时也为减轻管理人员的工作难度;更为协调报名人员与管理人员的关系,快速提高了报名人员与管理人员的工作效率应运而生。系统适用于政…...

【Hydro】部分基流分割方法及程序代码说明
目录 说明一、数字滤波法单参数数字滤波Lyne-Hollick滤波法Chapman滤波法Chapman-Maxwell滤波法Boughton-Chapman滤波法 双参数滤波法Eckhardt滤波法 二、其他基流分割方法基流指数(BFI)法时间步长(HYSEP)法PART法加里宁-阿里巴扬…...
C#Regex正则表达式(Regular Expression)
在C#中,Regex是正则表达式(Regular Expression)的缩写,它是一种强大的文本匹配和处理工具。正则表达式是一种用于描述模式的字符串,它可以用来在文本中查找、替换和提取满足特定模式的内容。 在C#中,你可以…...

Wi-Fi还可以做什么?柯南解释IOT应用
大会报告:无线人工智能技术正在改变世界 Wi-Fi还可以做什么?随着带宽的提升,无线终端可以识别出更多的多径,每条多径都可以视作一个虚拟传感器,以感知周边环境。基于此,越来越多的无线感知产品应运而生。20…...
centos部署java程序
后台启动java程序 nohup java -jar -XX:HeapDumpOnOutOfMemoryError -XX:HeapDumpPath/data/app1/logs/ /data/app1.jar --spring.config.location/data/app1/config/application.properties,/data/app1/config/application-dev.properties > /data/app1/logs 2>&1…...
Sqoop导入到Hive,Hive使用 HA
Sqoop写入Hive卡在连接Hive的JDBC上不执行 Sqoop访问 启用 HA模式的Hive 找到Hive的安装根目录:$HIVE_HOME/conf 创建一个新的配置文件:beeline-hs2-connection.xml <?xml version"1.0"?> <?xml-stylesheet type"text/xsl…...
[笔记] %的含义
取模 不赘述。 引导符 重点说一下在printf("%d", n);中的意思。 这里的意思是:将""外对应位置的结果返回给引导符所在的位置, %后面跟着的是结果对应的数据类型, 只有数据类型匹配才能正确输出结果。...

FRI及相关SNARKs的Fiat-Shamir安全
1. 引言 本文主要参考: Alexander R. Block 2023年论文 Fiat-Shamir Security of FRI and Related SNARKsAlbert Garreta 2023年9月在ZK Summit 10上分享 ZK10: Fiat-Shamir security of FRI and related SNARKs - Albert Garreta (Nethermind) 评估参数用的Sage…...

TensorFlow案例学习:使用 YAMNet 进行迁移学习,对音频进行识别
前言 上一篇文章 TensorFlow案例学习:简单的音频识别 我们简单学习了音频识别。这次我们继续学习如何使用成熟的语音分类模型来进行迁移学习 官方教程: 使用 YAMNet 进行迁移学习,用于环境声音分类 模型下载地址(需要科学上网&…...
MySQL CHAR 和 VARCHAR 的区别
文章目录 1.区别1.1 存储方式不同1.2 最大长度不同1.3 尾随空格处理方式不同1.4 读写效率不同 2.小结参考文献 在 MySQL 中,CHAR 和 VARCHAR 是两种不同的文本数据类型,CHAR 和 VARCHAR 类型声明时需要指定一个长度,该长度指示您希望存储的最…...
虚拟机 ping: www.baidu.com:未知的名称或服务
1、打开ifcfg-ens33文件 vi /etc/sysconfig/network-scripts/ifcfg-ens332、如下,加上网关和dns就行了,紫色部分,也就是DNS1“114.114.114.114” TYPE"Ethernet" PROXY_METHOD"none" BROWSER_ONLY"no" BOOTP…...

第二章 Python字符串处理
系列文章目录 第一章 Python 基础知识 第二章 python 字符串处理 第三章 python 数据类型 第四章 python 运算符与流程控制 第五章 python 文件操作 第六章 python 函数 第七章 python 常用内建函数 第八章 python 类(面向对象编程) 第九章 python 异常处理 第十章 python 自定…...

linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...

什么是库存周转?如何用进销存系统提高库存周转率?
你可能听说过这样一句话: “利润不是赚出来的,是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业,很多企业看着销售不错,账上却没钱、利润也不见了,一翻库存才发现: 一堆卖不动的旧货…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

高等数学(下)题型笔记(八)空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
怎么让Comfyui导出的图像不包含工作流信息,
为了数据安全,让Comfyui导出的图像不包含工作流信息,导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo(推荐) 在 save_images 方法中,删除或注释掉所有与 metadata …...