HTML引入媒体查询CSS,CSS3 多媒体查询

CSS3 多媒体查询

CSS2 多媒体类型

@media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则。

例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。

但是这些多媒体类型在很多设备上支持还不够友好。

CSS3 多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情,例如:

viewport(视窗) 的宽度与高度

设备的宽度与高度

朝向 (智能手机横屏,竖屏) 。

分辨率

目前很多针对苹果手机,Android 手机,平板等设备都会使用到多媒体查询。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

属性

@media

21.0

9.0

3.5

4.0

9.0

多媒体查询语法

多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。

@medianot|onlymediatypeand(expressions){CSS代码...;}

如果指定的多媒体类型匹配设备类型则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符,否则所有的样式会适应在所有设备上显示效果。

not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。

only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

all: 所有设备,这个应该经常看到。

你也可以在不同的媒体上使用不同的样式文件:

CSS3 多媒体类型

描述

all

用于所有多媒体类型设备

print

用于打印机

screen

用于电脑屏幕,平板,智能手机等。

speech

用于屏幕阅读器

多媒体查询简单实例

使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。

以下实例中在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色:

实例

@mediascreenand(max-width: 480px){body{background-color:lightgreen;}}

尝试一下 »

以下实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧:

实例

@mediascreenand(min-width: 480px){#leftsidebar{width:200px;float:left;}#main{margin-left:216px;}}

尝试一下 »

以下实例在屏幕可视窗口尺寸小于 600 像素时将 div 元素隐藏:

实例

@mediascreenand(max-width: 600px){div.example{display:none;}}

尝试一下 »

CSS3 @media 参考

更多多媒体查询内容可以参考

@media 规则。

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

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

相关文章

Codeforces 835 F Roads in the Kingdom(树形dp)

F. Roads in the Kingdom(树形dp) 题意&#xff1a; 给一张n个点n条边的无向带权图 定义不便利度为所有点对最短距离中的最大值 求出删一条边之后&#xff0c;保证图还连通时不便利度的最小值 $n < 2e5 $\(w_i < 1e9\) 思路:树形dp 这个图是一个环上挂着很多颗树&#xf…

前端websocket获取数据后需要存本地吗_是什么让我放弃了restful api?了解清楚后我全面拥抱GraphQL...

GraphQL初步认识背景REST作为一种现代网络应用非常流行的软件架构风格&#xff0c;自从Roy Fielding博士在2000年他的博士论文中提出来到现在已经有了20年的历史。它的简单易用性&#xff0c;可扩展性&#xff0c;伸缩性受到广大Web开发者的喜爱。REST 的 API 配合JSON格式的数…

列出薪金高于在部门30_我如何在五个月内将薪金提高一倍并获得一份了不起的工作...

列出薪金高于在部门30by Sam Williams通过山姆威廉姆斯 我如何在五个月内将薪金提高一倍并获得一份了不起的工作 (How I Doubled my Salary in Five Months and Got an Amazing Job) Six months ago I quit my job as a junior JavaScript developer and travelled around sou…

ftp服务器 vsftpd搭建和配置以及虚拟用户的设置

tp: File Transfer Protocol应用层协议&#xff1a;tcp, 21/tcpC/S&#xff1a;Client: 程序Server: 程序数据&#xff1a;命令连接&#xff1a;文件管理类命令&#xff0c;始终在线的连接数据连接&#xff1a;数据传输&#xff0c;按需创建及关闭的连接数据传输格式&#xff1…

计算机应用基础案例教程总结,计算机应用基础案例教程

包杰军等编著的《计算机应用基础案例教程》以培养职业能力为目标&#xff0c;本着“做学合一”、“理论与实践并行”、“知识与技能并重”的教育思想编写。本书将实际操作案例与教学内容紧密结合&#xff0c;结构清晰、内容翔实、图文并茂、实用性强。全书共分6章&#xff0c;第…

让不支持h5新标签的浏览器支持新标签

把这段js加到页面的头部就可以了&#xff0c;创建想让浏览器支持的标签即可 //条件判断是否支持 h5 if(window.applicationCache){alert("支持h5")}else{alert("不支持h5")document.createElement("article");document.createElement("head…

ios开发之--UIDocumentInteractionController的使用(实现更多分享服务)

最近在做项目的时候&#xff0c;碰到这样一个需求&#xff0c;就是本地生成pdf文件&#xff0c;然后本地打开&#xff0c;经过测试发现&#xff0c;pdf文件是无法保存到相册里面的&#xff0c;只能存到手机里面&#xff0c;鉴于苹果的存储机制&#xff0c;需要取出来&#xff0…

eclipse tomcat新建一个_Javaweb07-Eclipse自动创建动态web项目

学习笔记是参考的how2j使用Eclipse创建Dynamic Web Project前面的web项目都是通过手动创建的&#xff0c;现在使用eclipse EE自动创建动态web项目&#xff0c;熟悉一下创建流程&#xff0c;仍旧使用前面创建过的HelloServlet。需要注意的是&#xff0c;这里的tomcat版本变了&am…

python 删除重复字符_Google面试问题指南:使用Python删除重复出现的字符

python 删除重复字符by Anthony Sistilli安东尼西斯蒂里(Anthony Sistilli) Google面试问题指南&#xff1a;使用Python删除重复出现的字符 (Google Interview Question Guide: Delete Reoccurring Characters with Python) Nowadays, Google interviews are all the rage. Bu…

cordova

命令行 npm install -g cordova cordova create MyApp cd MyApp cordova platform add android 当然也可以把android换成browser把自己的前端程序放在www文件夹内这里注意如果用android studio打包或运行的话&#xff0c;&#xff08;即不用cordova&#xff09;&#xff0c;要把…

冒泡排序(Java版)

冒泡排序基本思想&#xff1a; 1.比较相邻的元素&#xff0c;如果第一个比第二个大&#xff0c;就交换它们两个。 2.对每一对相邻元素做同样的工作&#xff0c;从开始的第一对到结尾的最后一对。在这一点&#xff0c;最后的元素应该会是最大的数。 3.针对所有的元素重复以上的步…

计算机科学与技术专业的论文周报,毕业设计(实习)周报

本科毕业设计周报第1 周毕业生周记撰写毕业论文开题报告(初稿)&#xff0c;结合毕业设计所选的题目&#xff0c;查阅大量相关资料&#xff0c;主要针对该设计所涉及的背景&#xff0c;研究目的及意义&#xff0c;以及国内外的相关成熟技术进行筛选&#xff0c;提取部分核心内容…

excel导出_SpringBoot实现快速导出Excel

阅读本文约需要6分钟 大家好&#xff0c;我是你们的导师&#xff0c;我每天都会在这里给大家分享一些干货内容(当然了&#xff0c;周末也要允许老师休息一下哈)。上次老师跟大家分享了下MyBatis 几种通用的写法的相关知识&#xff0c;今天跟大家分享SpringBoot实现快速导出Exce…

SignalR Self Host+MVC等多端消息推送服务(4)

由于工作太忙&#xff0c;一直没时间更新博客&#xff0c;之前有很多朋友一直问我什么时候将后续的代码发上来&#xff0c;一直没时间&#xff0c;今天就长话短说&#xff0c;不写文章了&#xff0c;直接上demo&#xff0c;里面将正式项目中用到的一些敏感信息修改了&#xff0…

项目中需要总结的内容

1.铁塔项目的硬件总结 2.传感器项目的硬件总结 3.灯控项目的硬件总结 控制灯闪烁的电路&#xff0c;SIM卡板子复位电路&#xff0c;继电器控制电路转载于:https://www.cnblogs.com/yuesheng/p/6086647.html

计算机应用计算机电算化题库,2014年浙江省会计电算化客观题题库

第一套试题一、单选题1.在会计软件初始设置中&#xff0c;录入期初余额时(C)A&#xff0e;只要求录入一级科目的期初余额 B.只要求录入中间级科目的期初余额C&#xff0e;每级科目均需录入期初余额 D.只要求录入最末级科目的期初余额2.在总账系中&#xff0c;要求能够进行上下级…

使用一些我喜欢的东西开始使用ES6

by Todd Palmer托德帕尔默(Todd Palmer) 使用一些我喜欢的东西开始使用ES6 (Getting started with ES6 using a few of my favorite things) This tutorial walks you through some easy steps to get started learning the newest version of JavaScript: ES6.本教程将引导您…

A 子类继承父类,子类的构造函数会覆盖父类的构造函数

//子类 没有定义 构造 函数时&#xff0c;默认继承父类的构造方法&#xff1a;输出结果为 Class A... // 子类 定义了 构造 函数时&#xff0c;就不会继承父类的构造方法&#xff1a;输出结果是 Class B... <?php class A{ public function __construct(){ echo &qu…

fifo算法_缓存算法FIFO、LFU、LRU

阅读文本大概需要3分钟。0x01&#xff1a;FIFO算法FIFO(First in First out)&#xff0c;先进先出。其实在操作系统的设计理念中很多地方都利用到了先进先出的思想&#xff0c;比如作业调度(先来先服务)&#xff0c;为什么这个原则在很多地方都会用到呢&#xff1f;因为这个原则…

Pile 0009: Vim命令梳理

正常模式&#xff08;按Esc或Ctrl[进入&#xff09; 左下角显示文件名或为空插入模式&#xff08;按i键进入&#xff09; 左下角显示--INSERT--可视模式&#xff08;按v键进入&#xff09; 左下角显示--VISUAL-- i 在当前位置生前插入 I 在当前行首插入 a 在当前位置后插入 A 在…