响应式web开发

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

其中：
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

/*所有页面的缩放*/
.viewport{width:100%;min-width:320px;max-width:640px;margin:auto;overflow:hidden;background:#e2e2e2;}

@media only screen and (max-width:320px) and (min-width:300px) {
body {
font-size:12px!important
}
.viewport {
max-width: 320px
}
}
@media only screen and (max-width:360px) and (min-width:320px) {
body {
font-size: 12px!important
}
.viewport {
max-width: 320px
}
}
@media only screen and (max-width:360px) and (min-width:350px) {
body {
font-size: 12px!important
}
.viewport {
max-width: 360px
}
}
@media only screen and (max-width:480px) and (min-width:360px) {
body {
font-size: 12px!important;
}
.viewport {
/*max-width: 360px*/
}
}
@media only screen and (max-width:480px) and (min-width:470px) {
body {
font-size: 12px!important;
}
.viewport {
max-width: 320px
}
}
@media only screen and (max-width:560px) and (min-width:480px) {
body {
font-size: 18px!important;
}
.viewport {
max-width: 480px
}
}
@media only screen and (max-width:560px) and (min-width:540px) {
body {
font-size: 18px!important;
}
.viewport {
max-width: 540px
}
}
@media only screen and (max-width:570px) and (min-width:560px) {
body {
font-size: 18px!important
}
.viewport {
max-width: 480px
}
}
@media only screen and (max-width:640px) and (min-width:570px) {
body {
font-size: 18px
}
.viewport {
max-width: 480px
}
}
@media only screen and (max-width:640px) and (min-width:630px) {
body {
font-size: 18px!important;
}
.viewport {
max-width: 480px
}
}
@media only screen and (max-width:710px) and (min-width:640px) {
body {
font-size: 24px!important
}
.viewport {
max-width: 640px
}
}

示例网站：http://mediaqueri.es/
http://www.w3cfuns.com/article-5596330-1-1.html
http://2011.dconstruct.org/

 

移动端设计原则

3S原则是指：Simple、Small、Speedy。这是国外一位大牛总结的，可以参见《Mobile Web Design: Best Practices》。对这三点，我深表认同。想说的是Speedy严格意义上应该算是结果，而不能归为原则。Web设计方面，我一直崇尚简约风格：便捷的操作、清爽的界面、友好的提示、少而小的图片、精简的代码等，当做到了这些，相信网站会变得Speedy。
移动web开发应该把手机的固有特性优先考虑。首先，手机屏幕相比桌面屏幕很小，所以满屏可显示的内容不多，这就要求我们在页面设计的时候选择好适当的字号，还得考虑文档内容的优先次序，把重要内容靠前显示；其次，手机的交互方式让我们得去重新考虑页面元素的设计。桌面web以鼠标操作为主，这样可操作的范围很精确，移动web以触控操作为主，手指的操作范围比较宽泛，反映在页面上，我以按钮为例，对于小屏幕低分辨率的手机来说，可以把按钮设置为.button{display:block;}，而对于大屏幕高分辨率的手机，可以设置为.button{display:inline-block;}，这是按钮。对于链接列表，要设置适当的行高，避免可点击的范围太小而操作失误；最后，图片。手机开发应尽量避免图片的使用，像圆角、阴影、渐变等以前在桌面不好实现的情况，在手机开发上已经不存在了，完全可以采用css3来实现，所以设计师在设计psd效果图的时候，就把效果做出来，但切图的时候就不必给出。

响应式web开发

b) 编辑器安装：subline Text2（支持html5，安装css3扩展失败）、topStyle5（支持css3）。
c) 弄清视口和屏幕的区别。视口是浏览器的内容显示区域，屏幕是设备的物理显示区域。比如视口宽度我们一般用width表示，而屏幕宽度是用device-width来表示。相信做过手机页面的童鞋都经常见过这段代码：
<meta name=”viewport” content=”width=device-width,initial-scale=1.0”>
其中width=device-width就是说把页面宽度设置成和屏幕宽度一样。
d) 响应式设计创意网站收集：http://mediaqueri.es。这里有很多响应式Web设计的网站，供您参考和学习。
2) 征途ING：
e) 响应式web设计之媒体查询：

为了减少http请求，我想在css样式表里进行媒体查询会是个不错的选择，而不是在页面head部分使用link进行加载。样式表里的媒体查询格式为：
@media screen and (max-width:960px){}
大括号内部书写样式。该语句相当于判断语句，有两个条件，一个是视口宽度最大不超过960px，screen代表显示屏，这两个条件都具备了，就调用大括号内的样式。
f) 响应式web设计之流式布局：
流式布局以百分比进行布局。最重要是时刻关注元素的父级层，所有的元素都是以父级层为基准。流式布局的应用是为了和媒体查询完美地结合，形成平滑的布局变化跳转效果。一般而言，media里的样式多以width、padding、margin、font-size、line-height这些为主。
g) 响应式web设计之液态图片：
要实现液态图片，只需加入如下代码：img{max-width:100%;}
响应式web开发并不会很难，只是以前一个页面只需要美工给出一张效果图，现在要给出两张以上，这样一来，工作量相应地增加了许多。建议大家先有流式布局的思想，减少层级的嵌套。我会在文章末尾贴上自己做的一个测试页面，大家可以看看，页面来源于http://2011.dconstruct.org/，由于时间原因，一些细节没法处理得很到位，同时对于低版本的浏览器的处理没考虑进去。仅供参考吧。文章理论偏多，没办法，经常写着写着就往理论上偏，海涵。多谢阅读！