html调用媒体图标,关于CSS 媒体查询（media queries）

传统的CSS只支持数量有限的设备显示规则，如：all、screen、print、handheld、television和projector。这些对于设备的尺寸、方向或分辨率没有任何的定论。CSS2.1及以上的版本提供给了媒体查询技术(media queries)来让我们控制各种设备的不同样式。

在上面的代码中，styles_h.css将只会被用于设备显示器屏幕并且最大的宽度为480像素。注意这是设备的宽度，如果你希望浏览器的大小在480像素时用某个样式表来显示，应该使用下面的语法：

上面的这个样式规则可以同时在小屏幕的智能手机和缩小为480像素的桌面浏览器上使用，这样做是一个非常好的选择。然而，为每一个设备和屏幕尺寸都写一个单独的样式表是非常不现实的。当浏览器加载页面的时候，不管当前的屏幕分辨率是说明，它都会调用所有的样式表文件。过多的HTTP请求将会拖慢你的网页加载速度。通常更好的做法是将所有的样式表都放到一个style.css文件中，然后通过媒体查询技术(media queries)，使用@media语法来适配各种设备和屏幕分辨率。

/* standard CSS rules read by all devices and applicable to all resolutions */

html, body { }

@media print {

/* specific CSS rules for print, added only if they conflict with the rules above */

}

@media only screen and (max-width : 1200px) {

/* style rules for desktops and laptops with smaller screens, again only added if the rules here conflict with those at the topof the stylesheet */

}

@media only screen and (min-width : 768px) and (max-width : 1024px) {

}

@media only screen and (max-width : 480px) {

}

你需要注意的是，这些“breakpoints”不应取决于流行的设备的尺寸，而是由你的网站的需要来决定。

即使不使用@media媒体查询，一个设计为流式布局的响应式网站在浏览器缩小或小屏幕设备上也会被正确的缩放。如果你发现显示不正确，可以查看&ltl;head>中的标签是否书写正确。

最后需要注意的是，媒体查询是可以嵌套的：

@media screen {

body { background: yellow }

@media (min-width: 0px) {

body { background: green }

}

IE浏览器和Safari 6.1之前的浏览器不支持嵌套媒体查询。

html调用媒体图标,关于CSS 媒体查询（media queries）相关推荐

css3的媒体查询(Media Queries)
css3的媒体查询(Media Queries) 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesh ...
移动端zepot媒体查询media queries
使用zepot做轮播图 <head> <meta charset="utf-8"> <meta name="viewport" c ...
媒体查询Media Queries详解
@media 标签可以说是响应式网页的开发基础.其主要由媒体类型(Media Type)和媒体特性(Media Query)两部分组成. Media Type 设定后面规则生效的展示类型,包括all ...
CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
文章目录媒体查询介绍 Media Queries具体使用一.最大宽度Max Width 二.最小宽度Min Width 三.多个Media Queries使用四.设备屏幕的输出宽度Device ...
怎样使用CSS3媒体查询(Media Queries)制作响应式网站
自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...
css3媒体查询导航设计,如何用纯css 媒体查询media queries实现响应式汉堡导航菜单...
Hamburger_icon PC端和手机移动端均适配,依据设备的宽度大小决定是否值下拉菜单样式一. head里添加meta移动端的样式 width viewport的宽度 height viewp ...
移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
CSS媒体查询-物理像素-逻辑像素
媒体查询基本使用媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口. 你可以根据设备的类型(比如屏幕设备.打印机设备)或者特定的特性(比如屏幕的宽度)来修改你的页面. 媒体查询的使 ...
CSS媒体查询：最大宽度或最大高度
本文翻译自:CSS media queries: max-width OR max-height When writing a CSS media query, is there any way yo ...

html调用媒体图标,关于CSS 媒体查询（media queries）

html调用媒体图标,关于CSS 媒体查询（media queries）相关推荐

最新文章

热门文章