CSS media query应用中的层叠特性使用最佳实践
media query是css3规范中引入的，它提供了一种responsive design的基础机制：浏览器在不同size的设备中将以不同样式展现网页，这就给一个网页能够适应不同device一种可能。在实际使用中，我常常碰到以下问题：为什么media query的rule不起作用？很有可能和你的media query所处的位置有关，也很有可能和media query中的selector权重不
如外面的targeting到相同元素的css权重有关，比如：
@media screen and (max-width: 960px) {
p{
background-color:red;
}
}
p{
background-color: blue;
}
在上面的query代码中，我们希望在小于960px时，p应用一个red背景，但是由于后面有同样权重的p选择器定义了blue的背景，根据css的层叠特性，后面的(normal p rule)将覆盖前面的(media queried p rule)规则，所以即使在screen为小于960px时，仍然无法应用media query中的css定义。
解决方案和最佳实践
将media query block放到通用规则的后面
再比如，如果media query中定义的css rule权重太低，则同样不会被适用：
<html>
<head>
<title></title>
<style type="text/css">
p,.higher{
background-color: blue;
} @media screen and (max-width: 960px) { p{
background-color:red;
}
}
</style>
</head>
<body>
<p class="higher">testing p tag for css rule嵌套vs normal css</p>
</body>
</html>
上面的例子中，在media query中只用了一个p元素选择器，但是由于在html中，该p又有一个class相关联，而css定义中，也有对该class的定义。这样即使media query的条件满足了，但是由于权重太低，依然无法应用其规则!
解决方案和最佳实践
media query必须目标明确，真正选中要选的元素，和外部普通css选择器需要是完全一样的。最好在普通的css选择器规则之后，立即放对该选择器设定样式的media query规则
这个原因就是所谓层叠特性，当css被优先级权重完全一样的选择器选中时，则后面的会覆盖前面的@！！
//注意：在html中的class摆列顺序由于其优先级完全一样，所以顺序没有关系，有关系的是其在css定义中出现的顺序，后面的将覆盖前面的rule，初学者容易搞混淆
<p class="specialred modifyblue">优先级层叠演示</p>
.modifyblue{
color: blue;
}
.specialred{
color: red;
}
CSS media query应用中的层叠特性使用最佳实践的更多相关文章
- css Media Query详解
Media Queries详解 Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: 1 <link href="css/re ...
- mobile adaptor & css media query
mobile adaptor & css media query 移动端适配 & 媒体查询 http://cssmediaqueries.com/ device-aspect-rati ...
- CSS Media Query
[CSS Media Query] CSS Media Queries are a feature in CSS3 which allows you to specify when certain C ...
- 《深入理解Java虚拟机：JVM高级特性与最佳实践》【PDF】下载
<深入理解Java虚拟机:JVM高级特性与最佳实践>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062566 内容简介 作为一位 ...
- 读书笔记-《深入理解Java虚拟机：JVM高级特性与最佳实践》
目录 概述 第一章: 走进Java 第二章: Java内存区域与内存溢出异常 第三章: 垃圾收集器与内存分配策略 第四章: 虚拟机性能监控与故障处理 第五章: 调优案例分析与实战 第六章: 类文件结构 ...
- 一些实用的CSS Media Query代码片段，个人采集
CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果. 以下是一些C ...
- iPhone CSS media query（媒体查询）
iPhone5 iPhone6 iPhone6Plus iPad设备 media query(媒体查询)代码. iPhone < 5: @media screen and (device-a ...
- 【转】Java中关于异常处理的十个最佳实践
原文地址:http://www.searchsoa.com.cn/showcontent_71960.htm 导读:异常处理是书写强健Java应用的一个重要部分,Java许你创建新的异常,并通过使用 ...
- 分布式 PostgreSQL 集群(Citus)，分布式表中的分布列选择最佳实践
确定应用程序类型 在 Citus 集群上运行高效查询要求数据在机器之间正确分布.这因应用程序类型及其查询模式而异. 大致上有两种应用程序在 Citus 上运行良好.数据建模的第一步是确定哪些应用程序类 ...
随机推荐
- 在乌班图中将py3设置为默认解释器
ubuntu16.04中将python3设置为默认 直接执行这两个命令即可: sudo update-alternatives --install /usr/bin/python python /us ...
- Qt4.8.5移植
这两天搞了Qt移植 因为不小心 耽误了挺多时间 但是也比较好的掌握了 现在记录一下 准备工具: tslib-1.16 qt-everywhere-opensource-src-4.8.5.tar ...
- VUE 监听局部滚动 设置ICON的位置跟随
效果图如下: 目的: 为了让 + 号与 - 号跟随在当前 tr 的前边 第一步: 当tr指针经过时获取tr的相对位置 HTML JS 第二步:给滚动的div元素添加滚动事件获取滚动的高度 最后:设置I ...
- J15W-J45W全铜截止阀厂家，J15W-J45W全铜截止阀价格 - 专题栏目 - 无极资讯网
无极资讯网 首页 最新资讯 最新图集 最新标签 搜索 J15W-J45W全铜截止阀 无极资讯网精心为您挑选了(J15W-J45W全铜截止阀)信息,其中包含了(J15W-J45W全铜截止阀)厂家,( ...
- List与IList的区别
在我看一个源程序的时候看到这个例子使用了IList<T>返回类型,因为上午刚刚总结过List<T>的详细用法,突然出现了IList<T>,感觉很奇怪,于是上网搜集了 ...
- display:inline-block会出现的问题
用一个父元素包裹三个子元素,将父元素的white-space设置为nowrap;这样子元素就会排在父元素中而不会换行了,通过这种方式,我们也就可以在移动端使用包裹元素的margin值实现类似的单页应用 ...
- Web性能优化之雅虎军规
相信互联网已经越来越成为人们生活中不可或缺的一部分.Ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功能. 比如Google机会已经把最基本的office应 ...
- sencha touch dataview 中添加 button 等复杂布局并添加监听事件
config 中的属性默认都会自动生成 getter setter applier updater 四个方法. applier 在调用 setter 时被调用, updater 在属性值 ...
- Maven的目录结构和常用命令
一.Maven项目的目录结构 1.顶级目录结构 src:该目录主要存放的是项目的源代码文件. target:该目录是项目编译后产生的一个目录,主要存放的是编译后的.class文件. pom.xm ...
- 【httpwatch】httpwatch对测试的应用
HttpWatch是一款网页数据分析工具,是浏览器插件,集成在IE浏览器的工具栏中.主要可以用来帮忙我们查看及分析HTTP请求的:Cookie.请求参数.请求头信息.响应头信息.响应状态.响应正文等内 ...