伴随着挪动端客户用手机浏览网址愈来愈多，响应式网站的页面用得也愈来愈多了，那麼在网站建设的情况下，全自动融入网 站设计方案必须留意一些事宜：
一.容许网页页面总宽全自动调节：
最先，在网页源代码的头顶部，添加一行viewport元标识。
 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user- scalable=0, width=device-width"/>  viewport是网页页面默认设置的间距和相对高度，上边这行编码的意思是，网页页面总宽默认设置相当于显示屏宽 度（width=device-width），初始放缩占比（initial-scale=1）为1.0，即网页页面原始尺寸占显示屏总面积的100%。针对旧式IE6，7，8电脑浏览器必须js 解决，因为关键服务平台是ios和安卓系统，因此可以临时不考虑到Opera不兼容。
二.不应用肯定总宽
因为网页页面会依据手机屏幕总宽布局调整，因此 不可以应用肯定总宽的合理布局，也无法应用具备肯定总宽的原素。这一条十分关键。
实际说，CSS编码不可以特定清晰度总宽：width:xxx px; 只 能特定百分数来界定列总宽：width: xx%;或是：width:auto; 或者：应用较大总宽和较大相对高度max-width,max-height;
三.相对性尺寸的字 体
字体样式也无法应用肯定尺寸（px），而只有应用相对性尺寸（em）。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）。
四.流动性合理布局（fluid grid）
流动性合理布局"的含意是，每个区块链的地方全是波动的，并不是稳定一致的。.main {float: right;width: 70%;}.leftBar {float: left;width: 25%;}float的益处是，假如总宽过小，忘不掉2个原素，后边的因素会全自动翻转到前边原素的下边，不容易在水平方向overflow（ 外溢），防止了水准下拉列表的发生。此外，绝对定位（position: absolute）的应用，也需要十分当心。

五.响应式网页页面 设计方案"的关键，便是CSS3引进的MediaQuery控制模块。
它的意思便是，全自动检测显示屏总宽，随后载入相对应的CSS文档。 media="screenand(max-device-width: 400px)"href="tinyScreen.css" />上边的编码意思是，假如显示屏总宽低于 400清晰度（max-device-width: 400px），就载入tinyScreen.css文件。media="screen and (min-width: 400px) and (max-device- width: 600px)"href="smallScreen.css" />假如显示屏总宽在400清晰度到600像素中间，则载入smallScreen.css文件。除开 用html标签载入CSS文档，还能够在目前CSS文档中载入。@import url("tinyScreen.css") screen and (max-device-width: 400px);
六. CSS的@media标准同一个CSS文档中，还可以按照不一样的分辩率，挑选运用差异的CSS标准。@media screen and (max- device-width: 400px) {.column {float: none;width:auto;}#sidebar {display:none;}}上边的编码意思是，假如显示屏总宽低于400清晰度，则 column块撤销波动（float:none）、总宽自动调节（width:auto），sidebar块无法显示（display:none）。
为列和波动原素选用线形设 计:
@media screen and (max-width: 480px) {div,li {display: block;float:none;width:100%;}}
七.照片的响应式（fluid image）除开合理布局和文字，"响应式网页制作"还需要完成照片的全自动放缩。这只需一行CSS编码：img { max-width: 100%;}这行代码 针对大部分置入网页页面的短视频也合理，因此可以写出：img, object { max-width: 100%;}老版本的IE不兼容max-width，因此只能写出：img { width: 100%; }除此之外，windows平台放缩照片时，很有可能发生图象失帧状况。这时，可以试着应用IE的专用指令：img { -ms-interpolation- mode: bicubic; }或是，Ethan Marcotte的imgSizer.js。addLoadEvent(function() {var imgs = document.getElementById_x_x_x ("content").getElementsByTagName("img");imgSizer.collate(imgs);});但是，有标准得话，最好是或是选择不一样尺寸 的显示屏，载入不一样屏幕分辨率的照片。有很多方式 可以实现这一条，服务端和手机客户端都能够完成。
八. 主页具体内容搜索栏，产品类别，受欢迎产 品，关键词。
九. 防止出现水准下拉列表
有时候,照片或别的网页元素会阻拦在一般情形下可以正常的流动性的器皿原素.一下脚本制作能简单地 阻拦以上个人行为:
img,iframe