使用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) { .. }

更新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模板的更多相关文章

  1. CSS3 Media Queries模板:max-width和min-width

    CSS3 Media Queries模板 CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足,如果满 ...

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

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

  3. CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  4. 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  5. CSS3 Media Queries 片段

    CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...

  6. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  7. Css3 Media Queries移动页面的样式和图片的适配问题(转)

    CSS3 Media Queries 摘自:http://www.w3cplus.com/content/css3-media-queries Media Queries直译过来就是“媒体查询”,在我 ...

  8. 移动终端学习1:css3 Media Queries简介

    移动终端学习之1:css3 Media Queries简介 1.简介 这篇文章写的不错,我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-qu ...

  9. 移动终端学习一:css3 Media Queries简介

    移动终端学习之一 css3 Media Queries简介 1.简介 别人写过的我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-querie ...

随机推荐

  1. Linux基础入门学习笔记20135227黄晓妍

    学习计时:共24小时 读书:1小时 代码:8小时 作业:3小时 博客:12小时 一.学习目标 1. 能够独立安装Linux操作系统   2. 能够熟练使用Linux系统的基本命令   3. 熟练使用L ...

  2. nodeJs--模块module.exports与实例化方法;

    在nodejs中,提供了exports 和 require 两个对象,其中 exports 是模块公开的接口,require 用于从外部获取一个模块的接口,即所获取模块的 exports 对象.而在e ...

  3. NFine框架的T4模板

    1.前言 前段时间在网上看到一个开源框架很好的.开源:ASP.NET MVC+EF6+Bootstrap开发框架,写代码就是比较比较麻烦,分层比较多,对于我这种偷懒的人就想到了写一个T4模板.不了解框 ...

  4. angular(常识)

    我觉得angularjs是前端框架,而jquery只是前端工具,这两个还是没有可比性的. 看知乎上关于jquery和angular的对比http://www.zhihu.com/question/27 ...

  5. css的垂直居中

    请先看博客:http://www.jb51.net/css/39629.html

  6. 第二十一课:js属性操作的兼容性问题

    上一课主要讲了属性的概念,用法,固有属性和自定义属性的区别,class属性操作的方法等,这一课主要讲一些有关属性操作的兼容性问题. IE6-IE8在一些表示URL的属性会返回补全的改过编码的路径,比如 ...

  7. android 通过帧动画方式播放Gif动画

    注意:经过本人测试,这个方法很耗内存, 图片一多就崩了.慎用 <1>用工具(photoshop或者FireWorks)将GIF动画图片分解成多个GIF静态图片,然后保存在res\drawa ...

  8. Tensorflow学习笔记(一):MNIST机器学习入门

    学习深度学习,首先从深度学习的入门MNIST入手.通过这个例子,了解Tensorflow的工作流程和机器学习的基本概念. 一  MNIST数据集 MNIST是入门级的计算机视觉数据集,包含了各种手写数 ...

  9. 使用Git进行代码管理

    Git简介 Git 是 Linux Torvalds 为了帮助管理 Linux® 内核开发而开发的一个开放源码的版本控制软件. 先讲一下如何把开源项目fork到自己的github中 1.  点击图中的 ...

  10. cursor:pointer的意思

    cursor规则是设定网页浏览时用户鼠标指针的样式,也就是鼠标的图形形状cursor:pointer设定鼠标的形状为一只伸出食指的手,这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式另外可以选 ...