CSS3@media媒体查询
CSS3@media媒体查询
定义
media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
语法
在CSS中,@media
规则可置于您代码的顶层或位于其它任何@条件规则组内
媒体查询包含一个可选的媒体类型和媒体特性表达式(0或多个)最终会被解析为true
或false
。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型,并且所有的表达式的值都是true
,那么该媒体查询的结果为true
。
实例: 如果文档宽度小于 300 像素时 .box
使用这个样式( 超过了这个宽度就不使用这个样式了),(表达式为真执行)
@media screen and (max-width: 300px) {
.box {
background-color:lightblue;
width: 200px;
}
}
除了在@media 规则中使用外,媒体查询也可应用于HTML标签以将样式表的应用限于某个特定媒体。
<!-- Media-dependent style sheet included in HTML -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css" />
逻辑操作符
使用逻辑操作符,包括not
、and
和only
等,构建复杂的媒体查询。
and
操作符用来把多个媒体属性组合成一条媒体查询,对成链式的特征进行请求,只有当每个属性都为真时,结果才为真。
not
操作符用来对一条媒体查询的结果进行取反。
only
操作符仅在媒体查询匹配成功的情况下被用于应用一个样式,这对于防止让选中的样式在老式浏览器中被应用到。
若使用了not
或only
操作符,必须明确指定一个媒体类型。
媒体类型
all 适用于所有设备。
print 为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media(媒体屏幕尺寸), 以满足个别设备网页尺寸不匹配等问题。
screen 主要适用于彩色的电脑屏幕
CSS3@media媒体查询的更多相关文章
- css3 media媒体查询器用法总结(附js兼容方法)
css3 media媒体查询器用法总结 标签:class 代码 style html sp src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
- css3 media媒体查询器用法总结
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- css3 media媒体查询器用法总结 兼容ie8以下的方法
总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...
- CSS3 media媒体查询器的使用方法
最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器. 那么什么是me ...
- CSS Media媒体查询使用大全,完整媒体查询总结
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
- css3新特性@media(媒体查询)
现在web页面运行的设备的屏幕从pc端到pad,从pad到手机,各种各样,这样就用到了现在经常用到的响应式页面,为实现响应式页面开发,就用到一个非常有用的css3属性media(媒体查询). 介绍:媒 ...
- css3的媒体查询(Media Queries)
我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...
- 控制页面打印的2种方法(css3的media媒体查询和window.print())
在实际开发中,有时可能会有打印的需求.下面我总结了2种打印的方法,希望对各位小伙伴有所帮助. ①:直接用window.print()方法就可以打印整个页面,下面是一个小demo <!DOCTYP ...
- CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...
随机推荐
- 如何设置记事本( .txt文件)的默认编码为UTF-8?
1.在桌面新建一个文本文档,不要写入任何内容,然后手动另存为,将此文档编码改为UTF-8,然后将文件名字改为template.txt: 2.再将template.txt移动到C:\Windows\Sh ...
- MySQL 详细学习笔记 转
Windows服务 -- 启动MySQL net start mysql -- 创建Windows服务 sc create mysql binPath= mysqld_bin_path(注意:等号与值 ...
- F#周报2019年第13期
新闻 Visual Studio 2019发布会 Json2FSharp--在线类型生成器 cs2fs-online--从C#到F#的移植器 AWS Lambda layer上的.NET Core A ...
- 蓝桥杯九宫重排(bfs+用set去重)
题目连接 #define _CRT_SECURE_NO_WARNINGS #include<cstdio> #include<iostream> #include<que ...
- 长连接锁服务优化实践 C10K问题 nodejs的内部构造 limits.conf文件修改 sysctl.conf文件修改
小结: 1. 当文件句柄数目超过 10 之后,epoll 性能将优于 select 和 poll:当文件句柄数目达到 10K 的时候,epoll 已经超过 select 和 poll 两个数量级. 2 ...
- 在docker上部署mysql
1.拉取官方镜像5.6的版本.(查看有哪些版本,可以在阿里云的镜像仓库查看,我配置的镜像是阿里云的) docker pull mysql:5.6 2.查看拉取的镜像,获取镜像id docker ima ...
- Flask 接入第三方云通讯平台时出现 {‘172001’:’网络错误’}
错误:{‘172001’:’网络错误’},经过上网查找原因,原来是 Python 升级到 2.7.9 之后引入了一个新特性,当打开一个 https 链接时,会验证一次 SSL 证书.而当目标网站使用的 ...
- socket通信的遇到的问题1
/*使用select对fd可读写,格式*/ while(ctrl){ //// FD_ZERO(&readSocketSet); FD_SET(readSocketFd,&readSo ...
- Freemaker Replace函数的正则表达式运用
replace(param1,param2,param3) param1 正则表达式:param2 将匹配的字符替换成指定字符:param3 模式 param3 参数如下 模式 i r m ...
- 获奖感想与Java阶段性学习总结
获奖感想 其实我早就知道有小黄衫这个东西,而且它就在我的目标清单里,不过没想到娄老师发的这么早.我想小黄衫代表着的是老师对我这一阶段来学习成果和努力的肯定,虽然Java学习中付出很多时间精力,现在也值 ...