简单的移动网页设计模板
第 1 部分：移动 Web - 自适应网页设计
移动网页 - 自适应网页设计（html/css控制）
1.允许手动调整网页长度：“自适应网页设计”是如何做到的？
似乎并不难。 首先，在网页代码的底部，添加一行视口元标记。
viewport 是网页的默认长度和高度。 里面这行代码的意思是，网页长度默认等于屏幕长度（width=device-width），原始缩放比例（initial-scale=1），即网页的初始大小网页占据屏幕100%的面积。 至于viewport属性，我是在真正接触联通web开发的时候才遇到的。 少数 ps 布局固定为 960px、1000px 等。
下面三篇文章是对viewport属性的详细讲解： Viewport（视口的概念）——PC端的理解 Viewport（视口的概念）——移动端的应用 viewport——视口的概念（转） 对于老IE6、7 , 8 浏览器需要js处理，因为主要平台是ios和Android，所以暂时可以忽略
2、不要使用绝对长度 因为网页会根据屏幕间距调整布局，所以不能使用绝对长度布局，也不能使用绝对长度的元素。
这一点尤其重要。 具体来说，CSS代码无法指定像素长度：宽度：xxxpx； 仅比例长：宽：xx%； 或：宽度：自动； 这里的开发是指一个网页不仅可以在ps上使用，同时还可以在联通端使用，而对于webapps来说，还是需要单独为webapps制作一个页面。
对于这个知识点来说，对于我现在的项目来说是有好处的。 主要用于控制和限制数据库中读取图片的长度。具体参见：移动webapp中首次使用jquerymobile的体验及解决图片自适应大小问题
3. 相对大小的字体 字体不能使用绝对大小（px），而只能使用相对大小（em）。
正文{字体:normal100%Helvetica,Arial,sans-serif;}
里面的代码指定字体大小是页面默认大小的100%，即16像素。 h1{字体大小：;}
之后，h1 的大小是默认大小的两倍，即 24 像素（24/16=）。 小{字体大小：;}
小元素的大小是默认大小的两倍，即 14 像素 (14/16=)。
四。 流体布局（fluidgrid） “流体布局”是指每个块的位置是浮动的，而不是固定的。
.main{float:right;width:70%;}.leftBar{float:left;width:25%;}
float的好处是，如果长度太小，装不下两个元素，前面的元素会被手动滚动到后面元素的底部，并且不会在水平方向溢出手机网站的css模板，避免水平滚动条的出现。 另外，使用绝对定位（position:absolute）要特别小心。
5、“自适应网页设计”的核心是CSS3引入的MediaQuery模块。 意思是手动检测屏幕长度，然后加载对应的CSS文件。
里面的代码意思是如果屏幕长度大于400像素（max-device-width: 400px），则加载文件。
如果屏幕长度在 400px 到 600px 之间，则加载文件。 不仅加载带有html标签的CSS文件，还加载现有的CSS文件。 ***@importurl("")screenand(最大设备宽度:400px);
6、CSS的***@media规则 在同一个CSS文件中，你还可以根据不同的屏幕帧率选择应用不同的CSS规则。
***@mediascreenand(max-device-width:400px){.column{float:none;width:auto;}#sidebar{display:none;}}
里面的代码意思是，如果屏幕长度大于400像素手机网站的css模板，则取消列块浮动（float:none），手动调整宽度（width:auto），不显示侧边栏块（显示：无）。
七。 自适应图像（fluidimage）不仅仅是布局和文字，“自适应网页设计”还必须实现图像的手动缩放。 这只是一行 CSS 代码：
img{max-width:100%;} 这行代码对于大多数嵌入网页的视频也有效，因此可以写为：
img, 对象{最大宽度:100%;}
老版本的IE不支持max-width，
所以必须写成：img{width:100%;}
据悉，windows平台缩放图片时，可能会出现图像失真的情况。 这时候你可以尝试使用I
