Board logo

标题: 响应式Web设计:使用HTML5和CSS3实践 [打印本页]

作者: look_w    时间: 2019-2-18 19:03     标题: 响应式Web设计:使用HTML5和CSS3实践

第1章 HTML5、CSS3 及响应式设计入门

一些要点:

    人们通过手机浏览网页的比率在上升。手机浏览器浏览网页时,会让网页缩小至可视区域(“视口”),使用者可以对感兴趣的内容再单独放大。但是反复缩小、放大、点错位置终究不是友好的做法。

    预算充足的情况下,我们可以单独开发“手机版”网站,可以在其中增强一些功能,譬如根据当前GPS来挖掘出有价值数据。多数时候,根据视口大小来匹配不同的视觉效果还是优先选择。

    响应式设计的概念最早提出是指将弹性网格布局、弹性图片、媒体和媒体查询结合起来的网页开发技巧的结合。和以往的做法不同,我们推荐首先对小屏幕进行设计,然后逐渐增强针对大屏幕的设计和内容。

    全方位的测试响应式网站,只需要改变浏览器窗口大小就能完成大多数测试。当然你可以下载浏览器的插件来做到这些,比如Chrome上可以用WindowResizer插件。

    一些响应式开发的站点
        http://blog.teamtreehouse.com/
        http://2011.dconstruct.org/

    使用HTML5和CSS3能使前端的效果实现变得简单很多,但是也面临着浏览器不支持的问题。我们可以用一些现代化的工具(库)来修补它们。

    重申一点,预算允许条件下完全定制的移动Web开发比响应式网站开发更合适,但预算有限的前提下响应式Web设计较之标准的固定宽度设计,总是能够提供更好的用户体验。

第2章 媒体查询:支持不同的视口
关于媒体查询

    开始使用媒体查询吧,它已经被如此广泛地使用和被浏览器所支持。
    有了媒体查询,我们就能对设备特性(如视口宽度)设置特定的CSS样式。
    媒体查询的语法(可以拷贝如下代码到任意CSS的文件后面,然后预览相关网页的效果)。

       body {
           background-color: grey;
       }
       @media screen and (max-width: 960px) {
           body {
               background-color: red;
           }
       }
       @media screen and (max-width: 768px) {
           body {
               background-color: orange;
           }
       }
       @media screen and (max-width: 550px) {
           body {
               background-color: yellow;
           }
       }
       @media screen and (max-width: 320px) {
           body {
               background-color: green;
           }
       }   

    在CSS2中可以通过制定<link>标签的media属性来为样式表指定的设备类型(如显示屏或者打印机)。

    <link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">

    媒体查询则不仅是针对设备类型,还能根据设备的特性来应用样式,如下例为检测一块纵向放置的显示屏。

    <link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait- screen.css" />

    你甚至可以在检测中加上not来颠倒上例中的查询条件。

    <link rel="stylesheet" media="not screen and (orientation: portrait)" href="portrait- screen.css" />

    也可以将多个表达式组合在一起,如下为增加了视口宽度大于800的显示屏。

    <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)" href="800wide-portrait-screen.css" />

    更进一步还可以写一个媒体查询列表,相互之间用逗号隔开,任何一个条件满足就加载文件。

    <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen.css" />

    除了在<head></head>中链接CSS文件时候使用媒体查询,我们也可以在CSS文件中使用媒体查询。

        @media screen and (max-device-width: 400px) {
             h1 { color: green }
        }

    还可以在CSS中使用@import指令引入其他的样式表,谨慎使用这种方式,因为它会增加HTTP的请求从而导致网页加载速度变慢。

    @import url("phone.css") screen and (max-width:360px);

    媒体查询能使用的特性

    媒体查询中最常用的两个特性是视口宽度width和屏幕宽度device-width,除此以外还有orientation、aspect-ratio等特性可以检测到。这些特性几乎都可以结合max和min结合来创建一个使用范围。如下phone.css只有在视口宽度在200到300之间才会被引入:

        @import url("phone.css") screen and (min-width:200px) and (max-width:360px);
         

    如何用媒体查询来改造我们的设计

    CSS名为层叠样式表,意为后面的样式会覆盖前面的相同的样式,因此我们的做法是在前面设置通用的样式,然后用媒体查询来进一步重写相应部分。

    加载媒体查询的最佳方法

    浏览器虽然能忽略与自身不匹配的样式文件,但却不一定不下载这些文件。因此,你将样式文件拆分到不用的样式文件没有太大好处(个人喜好或者方便代码组织的目的除外),这会增加页面请求HTTP的数量。因此建议用如下的方式在已有的样式表中追加媒体查询样式。




欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0