怎么设计手机网页的样式？小编带给你答案

一. 怎么允许网页宽度自动调整： "自适应网页设计"到底是怎么做

其实并不难。我也是从不会到会慢慢过来的， 首先，在网页代码的头部，加入一行viewport元标签。
<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），
原始缩放比 例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 对于viewport属性，我也是真正在接
触移动web开发是才遇到的，一般的ps布局都是固定的960px，1000px这种。

下面是对viewport属性详细的解释： Viewport（视区概念）——pc端的理解 Viewport（视区概念）——移动端的应用 viewport ——视区概念（转） 对于老式IE6，7，8浏览器需要js处理，由于主要平台是ios和安卓，所有可以暂时不考虑
  body { font: normal 100% Helvetica, Arial, sans-serif; }  

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 { font-size: 1.5em; }   

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。

small { font-size: 0.875em; }  

small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/29698441/viewspace-1814430/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/29698441/viewspace-1814430/