电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 响应式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/)