自适应网页前端设计相关

　　自适应网页设计，英文名称叫Responsive Web Design.主要目的是为了在大小不同的设备上呈现相同的内容。本人在工作中遇到要用html写一个页面嵌入到android的webview中。这样的web设计起来就和PC 浏览器的web设计不太一样，主要是要考虑到移动设备屏幕分辨率不一样的问题。

　　经过我的观察，新浪微博有pad web 入口，手机 web 入口（两种m.weibo.com和m.weibo.cn），PC web入口，三种不同的前端，维护起来当然比较麻烦，而自适应网页设计做出的网页，一个前端能解决3中入口，当然技术上是有一定难度的。http://bradfrostweb.com/demo/mobile-first/#这个网页就是自适应网页，无论怎么调整浏览器的大小，所有UI都能适当的显示。那么怎么设计这么绚丽的网页呢，如下：

1. 在网页代码的head标签内加入如下代码：

　

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

其中initial-scale为初始化大小，即原始缩放比例，maximum-scale - 允许用户缩放到的最大比例，user-scalable - 用户是否可以手动缩放。

2. 字体和宽度不是用px

　　一般我们设计使用宽度如 width: xxx px; 但是要自适应的话最好改成width: xx % 或者width:auto。字体我们不用px而是使用em来指定字体的大小，具体px和em怎么转换请网上自查。

3. 布局问题

　　我们使用流布局：float。好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

4. 加载CSS

　　核心思想就是判断屏幕的宽度然后选择就加载相应的CSS文件。具体例子：

　　

<link rel="stylesheet" type="text/css"
　media="screen and (max-device-width: 480px)"
　href="mobile.css" />

　　以上代码的意思是当屏幕宽度小于480px的时候，加载mobile.css文件。当然屏幕宽度判断也可以是区间。我们也可以直接在CSS中判断需要加载的内容，例如：

@media screen and (max-width: 480px) {
　　　　.div1 {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}
　　　　#div2 {
　　　　　　display:none;
　　　　}
　　}

　　以上代码意思是，如果屏幕宽度小于480像素，则div1(class)块取消浮动（float:none）、宽度自动调节（width:auto），div2(id)块不显示（display:none）

5. 图片自适应

　　img标签的话，只需要设置 max-width: 100%;或width:100%;

　　css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，如下：

style="
background-image:url(qipa.png);
background-size:100% 100%;
-moz-background-size:100% 100%; /* 老版本的 Firefox */
background-repeat:no-repeat;"

以上代码中加载的qipa.png图片就是可以自适应大小的。

国内各种博客中也发现关于这方面的内容基本都出自同一内容，没有什么大的亮点，其实直接看外国文章是非常好的办法，以下就是国外关于自适应web的博文：
http://www.html5rocks.com/en/mobile/responsivedesign/
讲的非常详细，当然也有人翻译成了中文，想要的可以留下邮箱。