学习之响应式Web设计：Media Queries和Viewports

题外话

本来是想写篇关于Bootstrap的Scaffolding博文的，不过对于响应式Web设计不是很了解，所以就先有了这篇博文。

博客园原文地址：http://www.cnblogs.com/yhuang/archive/2012/03/29/responsive_web_design.html

 

目录

前言

什么是响应式Web设计（Responsive Web design）?

响应式Web设计的用途

Media queries & Viewport

@media queries

viewports

width=device-width

initial-scale=1.0,maximum-scale=1.0

width=<actual width>

@media all and (device-width:480)

中间尺寸 

推荐设置

参考文章

前言

现在使用移动设备人越来越多，移动版的Website随之也越来越重要；但是移动端设备的大小不一，屏幕分辨率各不相同，我们不可能为BlackBerry，iPhone， iPad等等每个都做单独的页面设计。所以我们需要的Website设计要能迎合多种device的要求并且兼容所有的屏幕分辨率，这种设计就叫响应式Web设计

 

什么是响应式Web设计（Responsive Web design）?

响应式Web设计是一种Web设计和开发能够根据屏幕大小、平台和方向对用户的行为和环境做出响应的设计。它包括了灵活的网格和布局，图像和智能使用CSS的media queries特性。当用户从Laptop切换到iPad上时，该网站应能自动地切换CSS规则以适应Device分辨率，图像尺寸和脚本执行。换句话说，响应式Web设计是具备能够自动响应用户喜好的技术。这将一劳永逸的满足对每个新上市的移动终端都要进行不同设计和开发的需求。

需要注意的是：响应式Web设计不仅仅是可调屏幕分辨率和可自动调整大小的图像，而且更是一种采用全新思考的Website设计方法。

 

响应式Web设计的用途

随着越来越多的设备而来的是各式各样的屏幕分辨率、定义和方向。每天都有正在开发的新屏幕尺寸的设备。每个设备都可以拥有不同的尺寸、功能、甚至颜色。有些是横向，有些是纵向，甚至还有些完全是正方形的。如图所示：

 

下图列出了一些最常见的：  所以，如果你要使你的客户满意，你必须让你的网站能够自动调整并适合上述设备的屏幕。例如，你应该为不同的设备定制不同的布局结构： 定制布局

同样，有些时候，根据需要显示或隐藏一些内容： 显示或隐藏内容 

很明显，我们不能为每一种设备定制一个页面。所以，我们应该如何处理这种情况呢?

Media queries & Viewport

解决问题的关键就是Media queries和Viewports。下面的内容是关于如何最好的使用Media queries和Viewports的。但是我并不会深入的讲怎样增强响应的细节，如果感兴趣，可以查看这篇博文的最后一部分：“参考文章”。

 

• @media queries

作为一个网页设计师或前端开发者，我们希望我们的网页总能很容易的自适应不同的设备和屏幕尺寸，不管我们用户使用的是21"台式显示器，13"笔记本电脑，10"的iPad或者更小的智能手机。响应式网页设计使用@media queries根据浏览器的宽度和CSS来改变页面的布局。我们可以这样使用的CSS：

/* Default wide-screen styles */
@media all and (max-width: 1024px) {
    /* styles for narrow desktop browsers and iPad landscape */
}
@media all and (max-width: 768px) {
    /* styles for narrower desktop browsers and iPad portrait */
}
@media all and (max-width: 480px) {
    /* styles for iPhone/Android landscape (and really narrow browser windows) */
}
@media all and (max-width: 320px) {
    /* styles for iPhone/Android portrait */
}
@media all and (max-width: 240px) {
    /* styles for smaller devices */
}

复制代码

是的，我们可以设置更小的width，或者中间尺寸。我待会再讨论。CSS media queries是非常强大和复杂的，在这里不想过多的讨论，因为上面的代码已经足够应付响应式Web设计了。如果你想要知道更多关于Media Queries的细节，请阅读参考文献里的相关文章。

• viewports

现在，当我们调整我们浏览器的大小时，上面的代码已经可以非常不错的完成工作了。但这并不能满足移动端的浏览器。原因是移动端浏览器（iPhone/Safari, Android/Chrome和Fennec）会默认页面是为宽屏幕设计的，所以将它缩小整个页面来适应小屏幕。这就表明了上面的代码完全不足于适应移动端的浏览器，因为设备无法识别正确的宽度。解决方法：在文档的头部使用苹果提供的viewport meta标签，并结合@media queries：

<meta name="viewport" content="...">

以上的代码中，content为空，因为我觉得有必要详细讲一下，而不是直接给出来，这样我们就能更清楚的记住，并且知道content里应该填些什么，并且为什么这样填。

• • width=device-width

我们看见很多网站都建议把content属性的值设置为width=device-width。这相当于告诉浏览器将页面宽度假设为设备宽度。不幸的是，只有当设备是纵向时假设才是正确的。当我们把设备旋转成横向时，device-width还是和纵向的一样（比如，320px），这意味着，即使我们把页面设计成适应了480px横向设备，它还是会返回320px的效果。

曾经尝试在media query里使用orientation来解决这个问题，但是orientation不会真正的告诉我们实际的设备宽度，因为它只告诉我们设备的宽度是大于还是小于设备的高度。正如有人指出，由于大部分网页往往垂直滚动，所以这是无关紧要的。

如果我们的页面在纵向和横向设备中样式相同，那么我们就可以用width=device-width就足够了，需要注意的是这个是唯一告诉android设备使用设备宽度的方法。

• • initial-scale=1.0,maximum-scale=1.0

initial-scale=1设置告诉浏览器初始化页面时不要对页面进行缩放。解决了没有使用viewport时出现的页面缩放问题。但还是有bug，当我们把移动端设备从纵向转成横向时，你就会发现这个问题了。这是因为initial-scale只在页面完全加载后有作用。在我们把移动设备从纵向转成横向的过程中，浏览器就会认为页面不变，但scales会设置为1.5，为了使320px的页面适应480px。但是，因为我们在@media queries中设置了480px这个宽度，那么页面CSS规则也会是适应480px的。结果就是，页面CSS规则是适应480px的，另外scale还是1.5。这个结果并不可怕，但是不可取。

 

为解决这个bug，我们可以添加maximum-scale=1这个设置。它的作用是阻止页面在旋转时放大，但它同时带来了更严重的问题：也阻止了用户手动放大或缩小页面。同样user-scalable=no设置也会让用户不能缩放页面。所以一般情况下，不要使用以上俩个设置。

是不是无法解决这个bug了？首先这个bug最多只是在显示层面，带来的后果一点不严重，因为即使页面自动缩放了，它还是成比例的。

• • width=<actual width>

有些人建议在viewport里使用特定的width，并且也按这个width设计页面。如果你可以为每个种类的device编写页面的话，这个设置是可行的，但需要我们明白的是它不是响应式设计。打印时，使用固定宽度布局是必要的，但我们网页应该适应用户的各种样式的设备。总之，不要这样使用。

• • @media all and (device-width:480)

这是个media query而不是viewport标签里的选项, 我在很多地方看到过这样的代码，但我并不认为这是好的做法。为什么？根据CSS3对media queries的描述，device-width在media queries里表示的是输出设备表面渲染的宽度。对于continuous media来说，device-width就是屏幕的宽度；对于paged media来说，device-width就是页面尺寸的宽度。以continuous media为例，device-width就是设备屏幕的宽度。除非浏览器最大化，它始终大于viewport的width。

测试表明，大多数桌面浏览器把device-width和width当作同义词。而移动端浏览器对此会有点混淆。至于viewport标签里，device-width只在纵向时等于设备的width。例如，一个320*480的设备，device-width总是320px，不论方向。然而对于CSS media queries，device-width是基于其目前方向上屏幕的width。

如果你一定要这样使用，请和orientation一起使用。但绝对不要使用max-device-width和min-device-width，因为用max-width和min-width替换会比较好。同样需要注意的是，新型号设备的宽度可能会改变。 

• • 中间尺寸 

上面我提到过，我们可以为任意数量的width来设计页面。最重要的是在不同width的浏览器中测试他们，通过调整window浏览器的大小来测试是最简单的方法。随着设计页面的width越来越小，我们可以去掉（Display：none；）一些不重要的内容，比如footer，sidebars，menu等，为主要内容留足够大的空间。我们的网站也许需要一个可以在所有width屏幕上运行良好的布局，也许只需要满足两到三个布局。这是非常容易设计和测试的，所以没有理由不做。

• • 推荐设置

最后，是我推荐的做法：

1. 使用viewport标签
2. 使用media queries来选择最适合页面尺寸的CSS
3. 在viewport标签里，使用width=device-width,initial-scale=1或者单独使用width=device-width
4. 不要使用maximum-scale=1和user-scalable=no
5. 不要使用width=<specific width>
6. 不要使用@media all and (*-device-width: xxx)

 

参考文章 

1. Ethan Marcotte. 2010. Responsive Web Design. In A List Apart #306. ISSN: 1534-0295.
2. Jeremy Keith. 2010. Responsive Enhancement. In adactio.
3. Kayla Knight. 2011. Responsive Web Design: What It Is and How To Use It. In Smashing Magazine.
4. Webkit based desktop browsers re-render the page correctly as you resize the browser, however they have a minimum width of 385px (on MacOSX) and I was unable to shrink the browser below this. Firefox 4 re-renders the page correctly until the width gets too narrow to fit the navigation toolbar. At that point the viewport width stays fixed even if you shrink the browser. The page is re-rendered if you type something (anything) into the URL bar. Opera 10/11 re-render correctly at all sizes.
5. Peter Paul Koch. 2010. A tale of two viewports — part two. In Quirksmode.
6. Using the Viewport on Safari. In Safari Web Content Guide.
7. The viewport meta tag. In Safari HTML Reference.
8. MDC. 2010. Using the viewport meta tag to control layout on mobile browsers. In Mozilla Developer Network.
9. Peter Paul Koch. 2010. Combining meta viewport and media queries. In Quirksmode.
10. Willison & Downe. Lanyrd.
11. Lie et al. 2010. Media Queries. W3C Candidate Recommendation 27 July 2010.
12. If you design your page for the narrow view and expect it to scale when rotated, then use width=device-width and nothing else. If, instead, you design your page for either width, then use width=device-width,initial-scale=1. This is the only way to get the android browser to render a page with the intended width. Mobile Safari will render the page exactly as if initial-scale=1 were specified alone. You will still end up with the zoom on rotate bug.
13. David Calhoun. 2010. The viewport metatag (Mobile web part I).

AC Milan vs. FC Barcelone : Milan, y croire... ou pas

 

大家有空移步到我的google blogger转转，那里有的不只是技术：www.yan-life.eu

最近的项目中，一直要使用到WebService，为了测试自己编写的WebService，就找了一个叫Storm的小工具。它帮了我很大的忙，所以我和大家分享一下。

 

Storm

是一款用于测试Web服务的免费并且开源的工具。是用F#编写的，如果感兴趣的话，你可以在codeplex上找到它的源码。

Storm特性：

1. 可以测试.NET、Java等多种编程语言所写的Web服务；
2. 动态调用Web服务方法，即使需要输入和复杂数据类型；
3. 节约开发时间和花费（仅仅为测试Web服务而开发throw-away测试客户端太过浪费）；
4. 在一个UI中测试多个Web服务；
5. 编辑、控制原始SOAP请求；
6. 其它（自己探索，乐趣更多！）。

运行环境 ： .NET 2.0及以上，F# 1.9.3.14 (可选)

 

Storm快速上手： 

1. 添加一个WebService（如下图一所示）：点击添加，输入wsdl的endpoint url，比如

   - http://www.deeptraining.com/webservices/weather.asmx
   - http://api.google.com/GoogleSearch.wsdl

2. 选择一个Web方法：让storm分析这个web方法，然后给出调用这个方法所需的参数。
3. 选择一个Web方法参数，并且输入必要的值。
4. 点击GO（绿色箭头按钮）：调用web方法。（结果如下图二所示）

图一： 添加WebServie

 

图二 ： 调用WebServe方法返回结果

 

Storm快捷操作:

• 加载WebService并且测试它的方法

1. 1. 在工具栏中点击ADD
   2. 提供Wsdl的endpoint Url
   3. 点击GO（绿色箭头按钮）
   4. 选择一个Web方法或点击右键，并在新标签页中打开它
   5. 点击SEND

 

• 保存SOAP请求作为测试用例

1. 1. 打开WebService
   2. 在树视图中（闪电图标），选择一个Web方法
   3. 点击SEND
   4. 在SOAP输入框中，切换到“原始视图”或“XML视图”
   5. 编辑数据
   6. 点击SAVE。选择“Test Data”选项，填写测试用例的标签，附注等。点击OK
   7. 现在，原始的SOAP请求消息将是该项目的一部分
   8. 同样，你可以在SOAP响应输出框中用步骤4-7保存SOAP响应作为预期响应。

 

• 保存当前会话为storm项目

1. 1. 假设你已经打开了一个带或不带测试用例的WebService
   2. 点击工具栏中的SAVE按钮
   3. 填写项目名称，单击OK：将创建下列文件结构

      {File} StormProject.stormproj
      - {Folder} ServiceName
      - {Folder} WebMethod
      - {Folder} TestCaseName
      - {File} TestInputLabel_testinput.xml
      - {File} WebMethod_test.config
      - {File} ServiceName_ws.config

       

• 载入已保存的Storm项目

1. 1. 创建一个storm项目
   2. 在工具栏中单击OPEN，选择已创建的storm项目文件
   3. 点击OK：加载WebService和所有测试用例。

 

• 执行已保存的测试用例

1. 1. 打开一个storm项目
   2. 右击一个测试用例节点。选择Run/EDIT：这将打开一个新标签页
   3. 根据需要编辑测试输入（点击Edit图标）
   4. 点击RUN来调用Web方法
   5. 如果是绿色，就意味着实际响应和预期响应一样

 

• 发送多个数组项

1. 1. 加载WebService
   2. 选择一个接受数组为输入参数的Web方法
   3. 点击“树视图”，编辑
   4. 点击RUN来调用Web方法
   5. 切换到“原始视图”。根据需要编辑SOAP请求，只要你喜欢，你可以添加任意多的数组项。但是要确保，你编辑后，SOAP请求还是正确的XML格式。（可以使用XML视图确认。）

 

• 发送多个成员数组项

1. 1. 加载WebService
   2. 选择一个接受类作为输入参数的Web方法（这个类含有数组成员）
   3. 点击“树视图”（闪电图标）
   4. 选择类：弹出对象编辑框
   5. 在对象编辑框中，选择数组成员
   6. 添加数组项

 

Un ciel nappé de nuages!

 

 

大家有空移步到我的google blogger转转，那里有的不只是技术：www.yan-life.eu