`

CSS3 Media Queries

    博客分类:
  • CSS3
 
阅读更多
    Media Queries媒体查询 功能:在不同的条件下使用不同的样式,使用页面达到不同的渲染效果。
    CSS3中的Media Queries增加了更多的媒体查询,可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件,如果媒体符合相应的条件,那么就会调用对应的样式表。

     最常见的例子:同时给PC机的大屏幕和移动设备设置不同的样式表。实现了web页面在不同的分辨率和设备下都能显示正常,并且不会丢失样式。


//当屏幕小于或等于600px时,将采用small.css样式来渲染页面
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />
//当屏幕大于或等于900px时,将采用big.css样式来渲染页面
 <link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />
//当屏幕在600px-900px之间时采用style.css样式来渲染页面
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
//宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上渲染页面
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

max-width 指的是可视区域分辨率,而max-device-width 是设备的实际分辨率:
//max-device-width 是 480px 的设备上触发样式
@media screen and (max-device-width: 480px) {
  .class {background: #000;}
}
 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" /> 


//iphone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
//iPad:纵向(portrait)时采用portrait.css渲染页面,横向(landscape)时采用landscape.css渲染页面
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />



//排除符合表达式的设备
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
//排除不支持媒体查询的浏览器
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
//没有明确指定Media Type,那么其默认为all,支持所有媒体介质
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />


http://www.w3cplus.com/content/css3-media-queries
http://www.cnblogs.com/lhb25/archive/2012/12/04/css3-media-queries.html
分享到:
评论

相关推荐

    用css3 media queries创建手机版网站

    ### 使用CSS3 Media Queries创建手机版网站 随着手持设备如智能手机和平板电脑的快速发展,网站适应各种屏幕尺寸变得尤为重要。CSS3 Media Queries作为一种强大的工具,帮助设计师和开发者针对不同类型的设备定制化...

    彻底弄明白CSS3的Media Queries(跨平台设计)

    在 CSS2 时代,如果你曾经为你的网站设计过打印版 CSS,就会明白 CSS3 Media Queries 的作用,不过,CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用,事实上,CSS2 的 Media Type 并不曾被多少设备所支持过。...

    CSS3 Media Query CSS3媒介查询

    **CSS3 Media Queries详解** CSS3 Media Queries是Web开发中的一个重要工具,它允许开发者根据设备的物理特性,如视口宽度、设备像素比等,来应用不同的样式规则。这一功能使得响应式网页设计成为可能,使得网站能...

    详解CSS3 Media Queries中媒体属性的使用

    CSS3 Media Queries是响应式网页设计中不可或缺的技术之一,它允许开发者根据不同的媒体类型以及媒体特征来应用不同的样式表。通过使用Media Queries,可以检测设备的特征,如屏幕分辨率、屏幕宽度、高度等,并根据...

    通过CSS3 Media Query实现响应式Web设计

    CSS3 Media Queries是实现这一目标的关键工具。通过Media Queries,我们可以根据设备特性,如视口宽度、设备像素比等,来定义不同的样式规则,从而让网站在手机、平板电脑和桌面电脑上都能呈现出最佳的布局和视觉...

    彻底弄明白CSS3

    ### 彻底弄明白CSS3:深入理解Media Queries #### CSS3 Media Queries概述 随着移动互联网的迅猛发展,网页设计面临着前所未来的挑战:如何确保同一网站在不同尺寸、不同类型的设备上都能拥有良好的视觉效果和用户...

    CSS3 Media Queries详细介绍和使用实例

    CSS3媒体查询(Media Queries)是响应式网页设计中的关键技术之一,它允许网页设计者根据不同的设备特征和条件应用不同的样式。随着移动设备的普及,网页的可访问性问题逐渐被重视,使用CSS3媒体查询可以为不同的...

    css3-mediaqueries兼容ie8的解决方法

    在网页设计领域,CSS3 Media Queries是现代网页布局的关键特性,它允许我们根据设备特性,如屏幕尺寸、分辨率和方向,来应用不同的样式。然而,不幸的是,Internet Explorer 8(IE8)及其更低版本并不支持这个功能。...

    CSS3 media queries + jQuery实现响应式导航

    本篇文章将深入探讨如何使用CSS3媒体查询(Media Queries)和jQuery来实现一个响应式导航,特别是在屏幕宽度变化时,导航栏会进行相应的布局调整。 首先,我们了解CSS3媒体查询(Media Queries)的概念。媒体查询是...

    CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)

    Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。 首先来看一个简单的实例: 复制...

    html5的css3-mediaqueries.js和html5.js两个js

    **CSS3 Media Queries** 是CSS3的一个重要特性,它允许内容根据设备特性和视口尺寸进行响应式布局。通过设置不同的样式规则,我们可以确保网页在不同设备(如桌面、平板电脑、手机)上都能得到良好的显示效果。例如...

    Responsive Web Design with HTML5 and CSS3(PACKT,2ed,2015)

    Integrate CSS3 media queries into your designs to use different styles for different media. You’ll also learn about future media queries which are evolving in CSS4. Responsive images allow different ...

    CSS3媒体查询Media Queries基础学习教程

    CSS3媒体查询(Media Queries)是现代网页设计中用于响应式设计的关键技术之一。它们允许开发者根据不同的设备特性以及设备状态应用特定的CSS样式规则。媒体查询通过检测设备的屏幕尺寸、分辨率、方向、颜色深度等...

    CSS3 media queries结合jQuery实现响应式导航

    CSS3的Media Queries是实现响应式设计的关键技术之一,它允许我们根据媒体类型或特征(例如屏幕宽度)应用不同的CSS样式规则。而jQuery是一种JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作,...

    CSS media queries

    CSS媒体查询(Media Queries)是CSS中用于定义不同设备或屏幕环境下样式规则的关键技术。它允许开发者根据设备特性,如屏幕尺寸、分辨率、颜色深度等,动态调整网页的布局和样式,实现响应式设计。 在CSS2中,媒体...

    解决IE响应式的解决方案css3-mediaqueries.js不生效问题.docx

    原本以为通过引入`css3-mediaqueries.js`这一JavaScript库来解决IE不支持CSS3 Media Queries的问题,但在实际应用过程中发现,该脚本并未按预期生效。 #### 二、初步诊断与分析 1. **闭合符号问题**:首先,排查...

Global site tag (gtag.js) - Google Analytics