"自融入网页页面设计方案"究竟是如何保证的？实际上其实不难。
1. 容许网页页面宽度全自动调剂：
最先，在网页页面编码的头顶部，添加1行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不适用。
2. 不应用肯定宽度
因为网页页面会依据显示屏宽度调剂合理布局，因此不可以应用肯定宽度的合理布局，也不可以应用具备肯定宽度的元素。这1条十分关键。
实际说，CSS编码不可以特定像素宽度：
width:xxx px;
只能特定百分比来界定列宽度：
width: xx%;
或：
width:auto;
或：
应用最大宽度和最大高宽比max-width,max-height;
3. 相对性尺寸的字体样式
字体样式也不可以应用肯定尺寸（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）。
4. 流动性合理布局（fluid grid）
"流动性合理布局"的含意是，各个区块的部位全是波动的，并不是固定不动不会改变的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的益处是，假如宽度很小，放不下两个元素，后边的元素会全自动翻转到前面元素的正下方，不容易在水平方位overflow（外溢），防止了水平翻转条的出現。
此外，肯定精准定位（position: absolute）的应用，也要十分当心。
5. "自融入网页页面设计方案"的关键，便是CSS3引进的Media Query控制模块
它的意思便是，全自动检测显示屏宽度，随后载入相应的CSS文档。
media="screen and (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);
6. CSS的@media标准
同1个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%;
}
}
7. 照片的自融入（fluid image）
除合理布局和文字，"自融入网页页面设计方案"还务必完成照片的全自动放缩。
这要是1行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_x("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
但是，有标准的话，最好是還是依据不一样尺寸的显示屏，载入不一样辨别率的照片。有许多方式能够保证这1条，服务器端和顾客端都可以以完成。
8 . 主页內容检索栏，商品归类，热门商品，重要字。
9. 防止出現水平翻转条
有时,照片或别的网页页面元素会阻拦在1般状况下可以一切正常流动性的器皿元素.1下脚本制作能轻轻松松地阻拦上述个人行为:
img,iframe {max-width:100%;box-sizing:border-box;}
