使用哪种媒体查询技术
我想知道以下声明媒体查询的方法是否有任何主要的优点/缺点。
似乎有3种主要方式--这有原因吗？有什么区别？
<link type="text/css" rel="stylesheet" media="screen and (max-width:320px)" href="mobile.css">
范瑟丝
@import
范瑟丝
@media (within css file)
提前致谢
共有1个答案
前两种方法会导致额外的HTTP请求加载另一个文件；最后一个方法在一个文件中包含所有的变体。
这在很大程度上取决于您希望如何组织CSS，以及不同媒体查询的CSS有多大差异。如果在单独的文件中处理它更容易，并且在部署之前没有自动将它们组合到单个文件中的构建过程，那么前两种方法是合适的。
如果要直接引用每个文件，或者要查看HTML中的媒体查询，请使用HTML版本。如果您有一个包装器CSS文件，它将为当前介质调用适当的CSS，并且不希望HTML被各种调用弄得乱七八糟，请使用@import版本。在这两种情况下，特定于媒体的样式表都将作为单独的HTTP请求加载。
如果您将所有CSS放在一个文件中，或者如果您有多个文件，但使用构建工具将它们组合成一个文件，请使用最后一种方法。
-
主要内容：1. 媒体类型,2. 媒体特性,3. 逻辑操作符,4. 定义媒体查询随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 Web 内容，越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。 媒体查询是 CSS 样式表最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不
-
响应式网站设计只有弹性布局这一个技巧是不够用的，媒体查询（ media queries ）也是响应式设计的核心技巧之一。媒体查询是可应用于 CSS 样式的简单过滤器。有了这些过滤器，我们可以根据设备呈现内容的特点轻松更改样式，包括显示屏类型、宽度、高度、方向甚至是分辨率。 在 CSS2.1 中定义了媒体类型，通过给 元素添加 media 属性，可以为不同的媒体类型加载不同的样式表。 <link r
-
在早些时候，为了满足移动用户的需求，需要为移动设备专门建立一个额外的网站。随着响应式设计的出现，这种做法已经越来越少见了。 2010年5月25日，Ethan Marcotte在A List Apart上发表了一篇开创性的文章，在这篇名为Responsive Web Design的文章中，他将媒体查询、弹性网格布局、弹性图片这三种已有的开发技术整合起来，并命名为响应式Web设计（RWD，Respon
-
问题内容： 默认情况下，我想给我的body元素添加绿色边框。在支持视网膜显示的设备上，我要首先检查尺寸。在ipad上，我想给我的身体一个红色边框，在iphone上，我想给它一个蓝色边框。但是像这样嵌套媒体查询是行不通的： 问题答案： 否。您需要使用运算符并将其写为两个查询。但是，您可以在将编译为CSS的SCSS中执行此操作，但是它将通过展开它们并使用运算符将它们组合在一起。 这是一个普遍的问题，一
-
本文向大家介绍twitter-bootstrap 媒体查询，包括了twitter-bootstrap 媒体查询的使用技巧和注意事项，需要的朋友参考一下 示例 Bootstrap中的媒体查询允许您根据视口大小移动，显示和隐藏内容。在LESS文件中，使用以下媒体查询在Bootstrap网格系统中创建关键断点： 有时这些扩展为包括最大宽度，以将CSS限制为较窄的设备集：
-
在这本书中，我想要把主要精力都集中在讲解Sass的基础使用，和证明Sass并不会和你的工作流程脱节。但在最后一章中，我想讨论一些使用Sass结合媒体查询的高级技术和一些我每天工作中用到的将复杂CSS简化的例子。 只要你能想到的，Sass就可以办到。使用变量和一些mixin会让你的生活变得更轻松。如果你想的话，Sass完全不局限于这些简单的功能。下面这个例子再一次举重若轻的展示了Sass的建立兼容高