响应式设计的还有一个重要技术手段是媒体查询。假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上响应式设计。媒体查询能够来解决这一问题。媒体查询能够为特定的浏览器和设备提供特定的样式。媒体查询是CSS 3的一个新特性,是对媒体类型的扩展。

提示:W3C列出了10种媒体类型,请參考http://www.w3.org/TR/CSS2/media.html#media-types

在响应式设计中,媒体查询一般在CSS中定义,如最常见的使用方式设置屏幕宽度小于1024px时的样式,代码例如以下:

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

// 在这时设置小于1024px时的样式

}

设置屏幕宽度小于600px时的样式,代码例如以下:

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

// 在这时设置小于600px时的样式

}

设置屏幕宽度在600px~900px之间时的样式,代码例如以下:

@media screen and (max-width: 600px) and(min-width: 900px){

// 设置样式

}

设置设备的实际分辨率小于480px时的样式(如iPhone),代码例如以下:

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

// iPhone手机样式在这里设置

}

设置iPad或iPhone在横向时的样式,代码例如以下:

@media screen and (orientation:landscape){

// 在这时设置样式

}

提示:很多其它关于媒体查询请參考http://www.w3.org/TR/css3-mediaqueries/。

学习HTML5最好的书就是《HTML5网页开发实例具体解释》,用代码学习用案例学习,可比看文字有趣多了!!!一本书搞定HTML5,从如今開始。

免费的HTML5连载来了《HTML5网页开发实例具体解释》连载(六)媒体查询的更多相关文章

  1. 感谢各位亲们的大力支持,免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了!

    感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了.  有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...

  2. 《HTML 5网页开发实例具体解释》样章、内容简单介绍、前言

    http://spu.jd.com/1167757597.html http://product.dangdang.com/23484942.html 样章 http://download.csdn. ...

  3. 《HTML 5网页开发实例具体解释》文件夹

    第一篇  从宏观上认识HTML 5 讲述了HTML 5引发的Web革命.HTML 5的总体特性.HTML 5相关概念和框架和开发环境搭建. 第1章 HTML 5引发的Web革命 1.1  你是不是真的 ...

  4. 免费的HTML5连载来了《HTML5网页开发实例详解》连载(二)

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  5. 免费的HTML5连载来了《HTML5网页开发实例详解》连载(六)媒体查询

    响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...

  6. 免费的HTML5连载来了《HTML5网页开发实例详解》连载(五)图解通过Fiddler加速开发

    Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...

  7. 免费的HTML5连载来了《HTML5网页开发实例详解》连载(三)DOCTYPE和字符集

    在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...

  8. 当里个当,免费的HTML5连载来了《HTML5网页开发实例详解》连载(一)

    读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信“Flash之我见”中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得 ...

  9. 《HTML5网页开发实例详解》连载(四)HTML5中的FileSystem接口

    HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...

随机推荐

  1. BZOJ 1005: [HNOI2008]明明的烦恼( 组合数学 + 高精度 )

    首先要知道一种prufer数列的东西...一个prufer数列和一颗树对应..然后树上一个点的度数-1是这个点在prufer数列中出现次数..这样就转成一个排列组合的问题了.算个可重集的排列数和组合数 ...

  2. KMP算法的一次理解

    1. 引言 在一个大的字符串中对一个小的子串进行定位称为字符串的模式匹配,这应该算是字符串中最重要的一个操作之一了.KMP本身不复杂,但网上绝大部分的文章把它讲混乱了.下面,咱们从暴力匹配算法讲起,随 ...

  3. 利用python进行数据分析之数据规整化

    数据分析和建模大部分时间都用在数据准备上,数据的准备过程包括:加载,清理,转换与重塑. 合并数据集 pandas对象中的数据可以通过一些内置方法来进行合并: pandas.merge可根据一个或多个键 ...

  4. BZOJ 3211 花神游历各国 (树状数组+并查集)

    题解:首先,单点修改求区间和可以用树状数组实现,因为开平方很耗时间,所以在这个方面可以优化,我们知道,开平方开几次之后数字就会等于1 ,所以,用数组记录下一个应该开的数,每次直接跳到下一个不是1的数字 ...

  5. Oracle 存储过程DEMO

    );   cursor isbns is select ISBN,id from librarys;   bn isbns%rowtype;   begin  for bn in isbns  loo ...

  6. HDOJ 1003 Max Sum(线性dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1003 思路分析:该问题为最大连续子段和问题,使用动态规划求解: 1)最优子结构:假设数组为A[0, 1 ...

  7. Microsoft Deployment Toolkit 2013 Preview Release Now Available

    MDT 2013 provides a common console with comprehensive tools and guidance for every organizational ro ...

  8. Android 性能优化 三 布局优化ViewStub标签的使用

    小黑与小白的故事,通过虚拟这两个人物进行一问一答的形式来共同学习ViewStub的使用 小白:Hi,小黑,ViewStub是什么?听说能够用来进行布局优化. 小黑:ViewStub 是一个隐藏的,不占 ...

  9. iOS自定义控件教程:制作一个可重用的旋钮

    当你的APP需要一些新功能时,自定义UI控件会十分有用,尤其是这些自定义控件可以在其他APP里面很好的重用.Colin Eberhart写过一篇很棒的介绍自定义UI控件的教程.这个教程涉及的是一个继承 ...

  10. openstack之Nova

    一.Nova简介及其核心组件: Nove在openstack中提供计算服务: Nova核心模块: Controller Nova-api:提供API,包括命令行API; Nova-schedule: ...