怎么搭建响应式web网页设计

页面html如何构建自适应网站web网页制作

自适应网站设计方案(Responsive Web design)的宗旨是：密集建立网页的图片排版尺寸，能够自动化地依据客户形为及其应用的设施自然环境（体系服务平台、显示屏尺寸、显示屏定项等）开展相对性应的合理布局。

1.页面头width=device-width;  initial-scale=1.0">http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">script>

针对旧式的网页(IE6,7,8)必须加上css3-mediaqueries.js适配IE9的配备

2.不应用絕對总宽，只有应用百分数总宽3.相对性尺寸的黑体字

黑体字也不可以应用絕對尺寸（px），而只有应用相对性尺寸（em），如

font-size: 1.5em; 默认设置尺寸的1.5倍，即24清晰度4.流动性合理布局

全部块全是float波动的,当心应用position: absolute绝对定位

5.CSS的挑选载入<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" /><link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

显示屏总宽低于400清晰度，就载入tinyScreen.css文档。假如显示屏总宽在400清晰度到600清晰度中间，则载入smallScreen.css文档，另一个CSS内还可以依据显示屏总宽设定：

@media screen and (max-device-width: 400px) { .column  { float: none; width:auto; }  #sidebar  { display:none; } }

显示屏总宽钟头400PX时开启姿势:class=”column”的块撤销波动,总宽自動,id=”sidebar”的块掩藏

6.照片融入img  { max-width: 100%;}  img  { width: 100%; }  img  { -ms-interpolation-mode: bicubic; }