CSS3 Media Queries模板

作者：大漠 日期：2012-04-04 点击：3183

最早在《CSS3 Media Queries》一文中初探了CSS3的媒体类型和媒体特性的相关应用。简单的知道了使用这个能在各种不同的设备显示不一样的样式风格。随着Responsive的响应式设计的兴起，前面跟大家一起学习了：

  1. 《Responsive设计和CSS3 Media Queries的结合》
  2. 《了解Responsive网页设计的三个特性》
  3. 《Responsive设计的关键三步》

从这几篇文章中可以知道，在Responsiv的设计中，CSS3的Media是起着非常关键性的作用，也可以说没有CSS3 Media这个属性，Responsiv设计是玩不起来，也是玩不转的。大家都知道Responsiv是为各种不同的设备进行样式设计的，但有一个问题大家或许还处在模糊状态，这个CSS3 Media要如何设置各自的临界点？

那么今天我们就针对上面的问题，一起来探讨一下CSS3 Media Queries在各种不同设备（桌面，手机，笔记本，ios等）下的模板制作。那么Media Queries是如何工作的？那么有关于他的工作原理大家要是感兴趣的话可以参考《CSS3 Media Queries》一文，里面已经做过详细的介绍，这里就不在进行过多的阐述。

CSS3 Media Queries模板

CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足，如果满足就调用相应的样式。打个比方来说，如果你的Web页面在960px的显屏下显示，那么首先会通过CSS3 Media Queries进行查询，看看有没有设置这个条件样式，如果找到相应的，就会采用对应下的样式，其他的设备是一样的道理。下面具体看看“max-width”和“min-width”模板：

使用max-width

        @media screen and (max-width: 600px) {//你的样式放在这里....}

使用min-width

     @media screen and (min-width: 900px) {//你的样式放在这里...}

max-width和min-width的混合使用

     @media screen and (min-width: 600px) and (max-width: 900px) {//你的样式放在这里...}

同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断样式的调用，这个主要用在iPhone,iPads设备上，比如像下面的应用：

iPhone和Smartphones上的运用

     /* iPhone and Smartphones (portrait and landscape) */@media screen and (min-device-width : 320px) and (max-device-width: 480px) {//你的样式放在这里...}

max-device-width指的是设备整个渲染区宽度（设备的实际宽度）

iPads上的运用

        /* iPads (landscape) */@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {//你的样式放在这里...}/* iPads (portrait) */@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {//你的样式放在这里...}

针对移动设备的运用，如果你想让样式工作得比较正常，需要在“<head>”添加“viewport”的meta标签：

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

有关于这方面的介绍大家可以看看这个blog上进行的的移动端开发的相关总结。

调用独立的样式表

你可能希望在不同的设备下调用不同的样式文件，方便管理或者维护，那么你可以按下面的这种方式进行调用：

     <link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width: 480px)" href="iphone.css" /><link rel="stylesheet" media="screen and (min-device-width : 768px) and (max-device-width : 1024px)" href="ipad.css" />

CSS3 Media Queries在标准设备上的运用

下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求：

1、1024px显屏

        @media screen and (max-width : 1024px) {/* CSS Styles */}

2、800px显屏

       @media screen and (max-width : 800px) {/* CSS Styles */}

3、640px显屏

        @media screen and (max-width : 640px) {/* CSS Styles */}

4、iPad横板显屏

       @media screen and (max-device-width: 1024px) and (orientation: landscape) {/* CSS Styles */}

5、iPad竖板显屏

       @media screen and (max-device-width: 768px) and (orientation: portrait) {/* CSS Styles */}

iPhone 和 Smartphones

       @media screen and (min-device-width: 320px) and (min-device-width: 480px) {/* CSS Styles */}

现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下：

   // Landscape phones and down@media (max-width: 480px) { ... }// Landscape phone to portrait tablet@media (max-width: 768px) { ... }// Portrait tablet to landscape and desktop@media (min-width: 768px) and (max-width: 980px) { ... }// Large desktop@media (min-width: 1200px) { .. }

在bootstrap中的responsive.css采用的是网格布局，大家可以到官网查看或下载其源码进行学习。另外960gs为大家提供了一个Adapt.js也很方便的帮大家实现上述效果。感兴趣的同学可以去了解了解。

下面给大家提供几个这方面的案例，以供大家参考：

  1. 《CSS3 Media Queries案例——Hicksdesign》
  2. 《CSS3 Media Queries案例——Tee Gallery》
  3. 《CSS3 Media Queries案例——A List Apart》

更新CSS3 Media Queries模板查询

1、Smartphones (portrait and landscape)

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {/* Styles */
}

2、Smartphones (landscape)

@media only screen and (min-width : 321px) {/* Styles */
}

3、Smartphones (portrait)

@media only screen and (max-width : 320px) {/* Styles */
}

4、iPads (portrait and landscape)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {/* Styles */
}

5、iPads (landscape)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {/* Styles */
}

6、iPads (portrait)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {/* Styles */
}

7、iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {/* Styles */
}

8、640px显屏

@media screen and (max-width : 640px) {/* CSS Styles */
}

9、800px显屏

@media screen and (max-width : 800px) {/* CSS Styles */
}

10、1024显屏

@media screen and (max-width : 1024px) {/* CSS Styles */
}

11、Desktops and laptops

@media only screen and (min-width : 1224px) {/* Styles */
}

12、Large screens

@media only screen and (min-width : 1824px) {/* Styles */
}

那么有关于CSS3 Media Queries模板的相关介绍就说到这里了，最后希望大家喜欢。如果你觉得这篇文章对你有所帮助或者比较有实用价值，您可以把他推荐给您的朋友，如果你有更好的分享可以在下面的评论中直接与我们一起分享您的经验。

2012年10月09日更新

@media only screen and (min-width: 320px) {/* Small screen, non-retina */}@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { /* Small screen, retina, stuff to override above media query */}@media only screen and (min-width: 700px) {/* Medium screen, non-retina */}@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { /* Medium screen, retina, stuff to override above media query */}@media only screen and (min-width: 1300px) {/* Large screen, non-retina */}@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { /* Large screen, retina, stuff to override above media query */}

原文地址：http://www.w3cplus.com/css3/css3-media-queries-for-different-devices

转载于:https://www.cnblogs.com/lhy2013/p/3501865.html

css3 media queries相关推荐

  1. CSS3 Media Queries：移动 Web 的完美开端

    移动时代,是任何 Web 设计与开发者都不能忽视的一个时代,总有一天,你设计的东西将被显示在两种屏幕上,桌面大屏幕和移动小屏幕,如何让同一个网站同时适应完全不同的两种尺寸的屏幕,这是一个很久以来都没有 ...

  2. CSS3 Media Queries在iPhone4和iPad上的运用

    CSS3 Media Queries的介绍在W3CPlus上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少.前几天在<修复iPhone上submit按钮bug>上介绍了 ...

  3. CSS：媒体查询 CSS3 Media Queries

    定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...

  4. CSS3 Media Queries 详细介绍与使用方法，Responsive Web Design 必备技术, 响应式设计

    上一篇我们介绍了Responsive Web Design之后,这次要来详细介绍CSS3 Media Queries了. 在上一篇中,我们提到Responsive Web Desig n的实作方式有大 ...

  5. 响应式web设计之CSS3 Media Queries

    开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  6. CSS3 Media Queries 实现网页自适应

    文章转载自:爱思资源网http://www.aseoe.com/show-10-261-1.html 导语 接下来会展示如何运用 HTML5 和 CSS3 来设计一个自适应网页.当今银屏分辨率从 32 ...

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

    Media Queries直译过来就是"媒体查询",在我们平时的Web页面中head部分常看到这样的一段代码: 复制代码 代码如下: <link href="css ...

  8. CSS之Responsive设计和CSS3 Media Queries的结合

    随着高科技的发展,现在我们浏览网页不在局限于PC机上了,用户可使用上网的设备是越来越多的品种:手机.小笔记本.iPad.Playbook,以及PC机,而且PC机的显展大小各不一致.这样一来不同的屏幕分 ...

  9. 实践 HTML5 的 CSS3 Media Queries

    先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...

最新文章

  1. android SDK manager 无法获取更新版本列表
  2. python 自定义函数和循环_Python循环语句——对for循环和while循环应用自定义函数公式的实践,套用,练习...
  3. CNCF TOC 委员张磊：不断演进的云原生给我们带来了什么？
  4. Elastic-Job中的SimpleJob
  5. python装饰器函数执行后日志_Python装饰器使用规范案例详解
  6. ubuntu的sudo输入密码时光标不动的问题
  7. Django08:模型层(ORM)--测试脚本/必知的13条/神器的双下划线查询/多表操作
  8. 前端学习（2750）：global全局外观设置
  9. C++ 判断元音/辅音
  10. pythonmap和list_（Python）list的内建函数 filter(), map(), 和 reduce()
  11. 常用Windows运行命令大全
  12. 和利时HOLLYSYS MACS-K系列DCS介绍
  13. 小米选择了总是打开方式_小米更改默认程序 小米修改默认程序的打开方式
  14. Qt之QListView的简单使用（含源码+注释）
  15. 酒店管理系统java代码_基于Spring开发的Java酒店管理系统 源码下载
  16. 软件测试面试宝典【测试流程、数据库、Linux、测试工具、自动化、性能测试】
  17. Java中使用Atomic*实现原子锁线程安全
  18. 【C++】代码实现：数据线性平滑算法：3点线性平滑、5点（1次、2次、3次）线性平滑、7点（1次、2次）线性平滑
  19. 如何查看计算机硬盘的软件内存条,内存检测工具,内存检测软件 - 内存条检测工具就用金山卫士 - 安全专题...
  20. 设f(x)=∑x^n/n^2,证明f(x)+f(1-x)+lnxln(1-x)=∑1/n^2

热门文章

  1. idea mysql删除_IntelliJ IDEA 配置Mysql5.7 带图文详解 视频讲解
  2. c语言编译错误c267,为啥编译出现HAHA.C(31): error C267: 'adc0832': requires ANSI-style prototype.......
  3. 排名算法（三）--排序学习
  4. python使用os.system()方法进行多模块安装
  5. 享元模式在 Java Integer 中的应用
  6. spark sql练习之join操作
  7. openresty入门 方法及指令
  8. 看雪 好文 汇集贴（持续更新）
  9. shellcode助手
  10. 一）golang的单例模式