题外话
本来是想写篇关于Bootstrap的Scaffolding博文的,不过对于响应式Web设计不是很了解,所以就先有了这篇博文。
博客园原文地址:http://www.cnblogs.com/yhuang/archive/2012/03/29/responsive_web_design.html
目录
什么是响应式Web设计(Responsive Web design)?
initial-scale=1.0,maximum-scale=1.0
@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设计的用途
随着越来越多的设备而来的是各式各样的屏幕分辨率、定义和方向。每天都有正在开发的新屏幕尺寸的设备。每个设备都可以拥有不同的尺寸、功能、甚至颜色。有些是横向,有些是纵向,甚至还有些完全是正方形的。如图所示:
/* 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 */
}
<meta name="viewport" content="...">
initial-scale=1设置告诉浏览器初始化页面时不要对页面进行缩放。解决了没有使用viewport时出现的页面缩放问题。
但还是有bug,当我们把移动端设备从纵向转成横向时,你就会发现这个问题了。这是因为initial-scale只在页面完全加载后有作用。在我们把移动设备从纵向转成横向的过程中,浏览器就会认为页面不变,但scales会设置为1.5,为了使320px的页面适应480px。但是,因为我们在@media queries中设置了480px这个宽度,那么页面CSS规则也会是适应480px的。结果就是,页面CSS规则是适应480px的,另外scale还是1.5。这
个结果并不可怕,但是不可取。user-scalable=no
设置也会让用户不能缩放页面。所以一般情况下,不要使用以上俩个设置。
- 使用viewport标签
- 使用media queries来选择最适合页面尺寸的CSS
- 在viewport标签里,使用width=device-width,initial-scale=1或者单独使用width=device-width
- 不要使用maximum-scale=1和user-scalable=no
- 不要使用width=<specific width>
- 不要使用@media all and (*-device-width: xxx)
参考文章
- Ethan Marcotte. 2010. Responsive Web Design. In A List Apart #306. ISSN: 1534-0295.
- Jeremy Keith. 2010. Responsive Enhancement. In adactio.
- Kayla Knight. 2011. Responsive Web Design: What It Is and How To Use It. In Smashing Magazine.
- 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.
- Peter Paul Koch. 2010. A tale of two viewports — part two. In Quirksmode.
- Using the Viewport on Safari. In Safari Web Content Guide.
- The viewport meta tag. In Safari HTML Reference.
- MDC. 2010. Using the viewport meta tag to control layout on mobile browsers. In Mozilla Developer Network.
- Peter Paul Koch. 2010. Combining meta viewport and media queries. In Quirksmode.
- Willison & Downe. Lanyrd.
- Lie et al. 2010. Media Queries. W3C Candidate Recommendation 27 July 2010.
- 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.
- David Calhoun. 2010. The viewport metatag (Mobile web part I).