什么是自适应设计

《什么是自适应设计》由会员分享，可在线阅读，更多相关《什么是自适应设计（4页珍藏版）》请在文档大全上搜索。

1、什么是自适应设计很多网站的做法是为不同大小的物理设备提供不同的网页。但是这样做很麻烦，需要维护多个版本，不够方便。如果只写一个版本，但是可以适应不同宽度的物理设备，那该多好。自适应网页设计(ResponsiveWebDesign)应运而生。那么关于自适应设计还有什么需要了解的呢？以下仅供参考！允许网页宽度自动调整：首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。对于老式

2、IE6，7，8浏览器需要js处理，由于主要平台是ios和安卓，所以可以暂时不考虑Opera不支持。不使用绝对宽度:由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS弋码不能指定像素宽度：width:xxxpx;只能指定百分比来定义列宽度：width:xx%;或者：width:auto;或者：使用最大宽度和最大高度max-width,max-height;相对大小的字体:字体也不能使用绝对大小(px)，而只能使用相对大小(em)。bodyfont:normal100%Helvetica,Arial,sans-serif;上面的

3、代码指定，字体大小是页面默认大小的100%，即16像素。h1font-size:1.5em;然后，h1的大小是默认大小的1.5倍，即24像素(24/16=1.5)osmallfont-size:0.875em;small元素的大小是默认大小的0.875倍，即14像素(14/16=0.875)。流动布局(fluidgrid)流动布局的含义:各个区块的位置都是浮动的，不是固定不变的。.mainfloat:right;width:70%;.leftBarfloat:left;width:25%;float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向ov