自融入网页页面设计方案的方式(手机上端优良的

1、在HTML头顶部提升viewport标识。

　　在网站HTML文档的开始，提升viewport meta标识告知访问器视口宽度等于机器设备显示屏宽度，且不开展原始放缩。编码以下：

　　这段编码适用Chrome、Firefox、IE9以上的访问器，但不适用IE8和低于IE8的访问器。

2、在CSS文档尾部提升对于不一样显示屏辨别率的标准。

　　比如应用以下的编码，可让显示屏宽度低于480像素的机器设备（如iPhone等），网页页面侧栏掩藏中部內容栏宽度全自动调整。下列编码对于Z-Blog，WordPress有关标识名字只需改动1下便可。




　　3、合理布局宽度应用相对性宽度。

　　网页页面整体架构可使用肯定宽度，但往下的內容架构、侧栏等最好是应用相对性宽度，这样对于不一样辨别率开展改动就便捷。自然还可以无需相对性宽度，那就必须在 @media screen and (max-device-width: 480px) 里边提升各个div的对于小显示屏的宽度，具体上更不便。

　　4、网页页面应用相对性字体样式

　　在HTML网页页面上不必应用肯定字体样式（px），而要应用相对性字体样式（em），针对大多数数访问器来讲，一般用 em = px/16 换算，比如16px就等于1em。

　　依据上面讲述的几点內容，我对于我blog的CSS开展了1些改动，发现能够从iPhone手机上访问到体验更佳的网页页面，但有1个难题沒有处理，便是顶部导航栏栏navbar显示信息有难题，换行后被下面的文章内容盖住了，不知道道如何能更好地处理这个难题（升级：历经网友提醒，在导航栏栏divNavbar的款式里，添加 overflow:hidden; 1行便可处理这个难题）。

　　下图是应用iPhone浏览的，历经改动CSS为自融入网页页面后的月光blog主页网页页面，看起来比初始的未提升网页页面许多了吧。

　　总而言之，依据上面4步进电机行改动的话，能够很简易地将1个网站改动为合适多种多样机器设备访问的网页页面，这针对根据手机上浏览网站的客户来讲，确实是1件好事儿。

下列是更详尽的填补材料：

伴随着3G的普及，愈来愈多的人应用手机上上网。

挪动机器设备正超出桌面上机器设备，变成浏览互联网技术的最多见终端设备。因而，网页页面设计方案师迫不得已应对1个困难：怎样才可以在不一样尺寸的机器设备上展现一样的网页页面？

手机上的显示屏较为小，宽度一般在600像素下列；PC的显示屏宽度，1般都在1000像素以上（现阶段流行宽度是1366×768），有的还做到了2000像素。一样的內容，要在尺寸迥然不同的显示屏上，都展现出令人满意的实际效果，其实不是1件非常容易的事。

许多网站的处理方式，是为不一样的机器设备出示不一样的网页页面，例如专业出示1个mobile版本号，或iPhone / iPad版本号。这样做虽然确保了实际效果，可是较为不便，另外要维护保养好几个版本号，并且假如1个网站有好几个portal（通道），会大大提升构架设计方案的繁杂度。

因而，很早就有人构想，能不可以"1次设计方案，广泛可用"，让同1张网页页面全自动融入不一样尺寸的显示屏，依据显示屏宽度，全自动调剂合理布局（layout）？

1、"自融入网页页面设计方案"的定义

2010年，Ethan Marcotte提出了"自融入网页页面设计方案"（Responsive Web Design）这个名词，指能够全自动鉴别显示屏宽度、并做出相应调剂的网页页面设计方案。

他制做了1个案例，里边是《福尔摩斯历险记》6个主人公的头像。假如显示屏宽度超过1300像素，则6张照片并排在1行。

假如显示屏宽度在600像素到1300像素之间，则6张照片分为两行。

假如显示屏宽度在400像素到600像素之间，则导航栏栏移到网页页面头顶部。

假如显示屏宽度在400像素下列，则6张照片分为3行。

mediaqueri.es上面有更多这样的事例。

这里也有1个检测小专用工具，能够在1张网页页面上，另外显示信息不一样辨别率显示屏的检测实际效果，我强烈推荐安裝。

2、容许网页页面宽度全自动调剂

"自融入网页页面设计方案"究竟是如何保证的？实际上其实不难。

最先，在网页页面编码的头顶部，添加1行viewport元标识。

　　<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页页面默认设置的宽度和高宽比，上面这行编码的意思是，网页页面宽度默认设置等于显示屏宽度（width=device-width），初始放缩占比（initial-scale=1）为1.0，即网页页面原始尺寸占显示屏面积的100%。

全部流行访问器都适用这个设定，包含IE9。针对那些旧式访问器（关键是IE6、7、8），必须应用css3-mediaqueries.js。

　　<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->

3、不应用肯定宽度

因为网页页面会依据显示屏宽度调剂合理布局，因此不可以应用肯定宽度的合理布局，也不可以应用具备肯定宽度的元素。这1条十分关键。

实际说，CSS编码不可以特定像素宽度：

　　width:xxx px;

只能特定百分比宽度：

　　width: xx%;

或

　　width:auto;

4、相对性尺寸的字体样式

字体样式也不可以应用肯定尺寸（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）。

5、流动性合理布局（fluid grid）

"流动性合理布局"的含意是，各个区块的部位全是波动的，并不是固定不动不会改变的。

　　.main {
　　　　float: right;
　　　　width: 70%;
　　}

　　.leftBar {
　　　　float: left;
　　　　width: 25%;
　　}

float的益处是，假如宽度很小，放不下两个元素，后边的元素会全自动翻转到前面元素的正下方，不容易在水平方位overflow（外溢），防止了水平翻转条的出現。

此外，肯定精准定位（position: absolute）的应用，也要十分当心。

6、挑选载入CSS

"自融入网页页面设计方案"的关键，便是CSS3引进的Media Query控制模块。

它的意思便是，全自动检测显示屏宽度，随后载入相应的CSS文档。

　　<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />

上面的编码意思是，假如显示屏宽度小于400像素（max-device-width: 400px），就载入tinyScreen.css文档。

　　<link rel="stylesheet" type="text/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);

7、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）。

8、照片的自融入（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("content").getElementsByTagName("img");

　　　　imgSizer.collate(imgs);

　　});

但是，有标准的话，最好是還是依据不一样尺寸的显示屏，载入不一样辨别率的照片。有许多方式能够保证这1条，服务器端和顾客端都可以以完成。