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应用中的层叠特性使用最佳实践的更多相关文章

  1. css Media Query详解

    Media Queries详解 Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: 1 <link href="css/re ...

  2. mobile adaptor & css media query

    mobile adaptor & css media query 移动端适配 & 媒体查询 http://cssmediaqueries.com/ device-aspect-rati ...

  3. CSS Media Query

    [CSS Media Query] CSS Media Queries are a feature in CSS3 which allows you to specify when certain C ...

  4. 《深入理解Java虚拟机：JVM高级特性与最佳实践》【PDF】下载

    <深入理解Java虚拟机:JVM高级特性与最佳实践>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062566 内容简介 作为一位 ...

  5. 读书笔记-《深入理解Java虚拟机：JVM高级特性与最佳实践》

    目录 概述 第一章: 走进Java 第二章: Java内存区域与内存溢出异常 第三章: 垃圾收集器与内存分配策略 第四章: 虚拟机性能监控与故障处理 第五章: 调优案例分析与实战 第六章: 类文件结构 ...

  6. 一些实用的CSS Media Query代码片段，个人采集

    CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果. 以下是一些C ...

  7. iPhone CSS media query（媒体查询）

    iPhone5  iPhone6  iPhone6Plus iPad设备 media query(媒体查询)代码. iPhone < 5: @media screen and (device-a ...

  8. 【转】Java中关于异常处理的十个最佳实践

    原文地址:http://www.searchsoa.com.cn/showcontent_71960.htm 导读:异常处理是书写强健Java应用的一个重要部分,Java许你创建新的异常,并通过使用 ...

  9. 分布式 PostgreSQL 集群(Citus)，分布式表中的分布列选择最佳实践

    确定应用程序类型 在 Citus 集群上运行高效查询要求数据在机器之间正确分布.这因应用程序类型及其查询模式而异. 大致上有两种应用程序在 Citus 上运行良好.数据建模的第一步是确定哪些应用程序类 ...

随机推荐

  1. 第八次 Scrum Meeting

    第八次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/4/12 22:00 20min 大运村1号楼6F 附Github仓库:WEDO 例会照片 工作情况总结(4.12 ...

  2. iphone手机拍照学习笔记

    大纲: 功能 理论 技巧 实战 一.功能 设置-相机可以打开网格. 短按屏幕.画面曝光切换. 长按调节曝光和聚焦,曝光有范围,取决于点选的地方. live photo可以拍出会动的照片,上划编辑,高速 ...

  3. 股神 C++

    题目描述 有股神吗? 有,小赛就是! 经过严密的计算,小赛买了一支股票,他知道从他买股票的那天开始,股票会有以下变化:第一天不变,以后涨一天,跌一天,涨两天,跌一天,涨三天,跌一天...依此类推. 为 ...

  4. bitset用法

    学习博客:https://www.cnblogs.com/magisk/p/8809922.html C++的 bitset 在 bitset 头文件中,它是一种类似数组的结构,它的每一个元素只能是0 ...

  5. Oracle PL/SQL编程之包(packages)

    1.简介 包用于在逻辑上组合过程和函数,它由包规范和包体组成. 我们可以使用create package来创建包,代码如下: ok,包创建完成,通过包的代码发现包的功能就是申明包中包含的过程和方法,红 ...

  6. android 用命令行打包生成 apk

    android 用 ant 进行 build. android sdk 下面的 tools/ant 下面的 build.xml 就是 build 的整个过程. 其中的 build 参数可在 ant.p ...

  7. k8s architecture

    总体架构 对应的源码结构: https://docker-k8s-lab.readthedocs.io/en/latest/kubernetes/stepbystep.html

  8. C# Unix时间戳转换[转载]

    原文地址: C# Unix时间戳转换 遇到Unix时间戳转换的问题,遂记录下来. Unix时间戳转DateTime string UnixTime = "1474449764"; ...

  9. Layer UI 模块化的用法(转)

    此文章适合入门的同学查看,之前因为项目的原因,在网上找了一套Layer UI做的后台管理系统模板,完全不懂LayUI里面的JS用法,看了官方文档和其它资料后才明白怎么去实现模块化这个例子,但是还是感觉 ...

  10. CXF - JAX-WS入门

    相关dependency,我使用的版本是2.7.11: <dependency> <groupId>org.apache.cxf</groupId> <art ...