目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念。
在这先说明下这两者的异同:
自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个 mobile 版本,或者 iPhone/iPad 版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个 portal(入口),会大大增加架构设计的复杂度。
于是,很早就有人设想,能不能" 一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?
2010 年,Ethan Marcotte 提出了" 自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。
图片来源 http://mashable.com/2012/12/11/responsive-web-design/
如图所示就叫做自适应布局。自适应布局有它的使用价值,在于它能够提供一种更加实用的解决方案,使得项目的实现成本更低,并且更加易于测试。一个自适应布局可以被看作是响应式布局的一个更加廉价的替代品,会在项目资源紧缺的情况下更具有吸引力。
而在响应式布局中你却要考虑上百种不同的状态:
响应式网页设计是自适应网页设计的子集。响应式网页设计指的是页面的布局(流动网格、灵活的图像及媒介查询)。总体目标就是去解决设备多样化问题。
响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。
当固定宽度与流动宽度结合起来时,自适应布局就是一种响应式设计,而不仅仅是它的一种替代方法。
那么如何进行响应式布局呢?下面就一步步为你揭开响应式布局的面纱:
Skill 1 学会运用 Css3 Media Queries,根据不同的屏幕分辨率,选择应用不同的 Css 规则
Media Queries 语法简介:
max-width:若浏览区域的宽度小于 400 像素,则下方的 CSS 描述就会立即被套用:
1 2 3 4 5 |
@media screen and (max-width:400px){ .class { background:#ccc; } } |
也可以把要套用的描述独立成外部档案:
1 |
<link rel="stylesheet" media="screen and (max-width: 400px)" href="mini.css" /> |
Min Width:若浏览区域的宽度大于 800 像素,则下方的 CSS 描述就会立即被套用:
1 2 3 4 5 6 |
@media screen and (min-width:800px){ .class { background:#666; } } |
Device Width:若浏览设备的可视范围最大为 480px,则下方的 CSS 描述就会立即被套用:(注:移动手机目前常见最大宽度为 480px,如 iPhone or Android Phone)
1 2 3 4 5 6 |
@media screen and (max-device-width:480px){ .class { background:#000; } } |
针对 iPhone4 提供专用的 css 设定档:
1 |
<link rel= "stylesheet" media= "only screen and (-webkit-min-device-pixel-ratio: 2)" type= "text/css" href= "iphone4.css" /> |
针对 iPad 的 Portrait Mode(直立) 与 Landscape Mode(横躺) 两种浏览模式给予不同的 css 设定档:
1 2 3 |
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="l |