今天小编跟大家讲解下有关自适应网页设计的方法(手机端良好的访问体验) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关自适应网页设计的方法(手机端良好的访问体验) 的相关资料，希望小伙伴们看了有所帮助。
1、在HTML头部增加viewport标签。 在网站HTML文件的开头 增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度 且不进行初始缩放。代码如下： 复制代码代码如下:<meta name="viewport"content="width=device-width, initial-scale=1"/> 这段代码支持Chrome、Firefox、IE9以上的浏览器 但不支持IE8以及低于IE8的浏览器。 2、在CSS文件尾部增加针对不同屏幕分辨率的规则。 例如使用如下的代码 可以让屏幕宽度低于480像素的设备（如iPhone等） 网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog WordPress相关标签名称只需修改一下即可。 复制代码代码如下:@media screen and (max-device-width: 480px) { #divMain{ float: none; width:auto; } #divSidebar { display:none; } } 3、布局宽度使用相对宽度。 网页总体框架可以使用绝对宽度 但往下的内容框架、侧栏等最好使用相对宽度 这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度 那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度 实际上更麻烦。 4、页面使用相对字体 在HTML页面上不要使用绝对字体（px） 而要使用相对字体（em） 对于大多数浏览器来说 通常用 em = px/16 换算 例如16px就等于1em。 根据上面讲述的几点内容 我针对我博客的CSS进行了一些修改 发现可以从iPhone手机浏览到体验更佳的页面 但有一个问题没有解决 就是顶部导航栏navbar显示有问题 换行后被下面的文章盖住了 不知道怎样能更好地解决这个问题（更新：经过网友提示 在导航栏divNavbar的样式里 加入 overflow:hidden; 一行即可解决这个问题）。 下图是使用iPhone访问的 经过修改CSS为自适应网页后的月光博客首页页面 看起来比原始的未优化页面好多了吧。 总之 根据上面四步进行修改的话 可以很简单地将一个网站修改为适合多种设备浏览的页面 这对于通过手机访问网站的用户来说 的确是一件好事。以下是更详细的补充资料：随着3G的普及 越来越多的人使用手机上网。
移动设备正超过桌面设备 成为访问互联网的最常见终端。于是 网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页
手机的屏幕比较小 宽度通常在600像素以下；PC的屏幕宽度 一般都在1000像素以上（目前主流宽度是1366×768） 有的还达到了2000像素。同样的内容 要在大小迥异的屏幕上 都呈现出满意的效果 并不是一件容易的事。
很多网站的解决方法 是为不同的设备提供不同的网页 比如专门提供一个mobile版本 或者iPhone / iPad版本。这样做固然保证了效果 但是比较麻烦 同时要维护好几个版本 而且如果一个网站有多个portal（入口） 会大大增加架构设计的复杂度。
于是 很早就有人设想 能不能"一次设计 普遍适用" 让同一张网页自动适应不同大小的屏幕 根据屏幕宽度 自动调整布局（layout）
一、"自适应网页设计"的概念
2010年 Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词 指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例 里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素 则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间 则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间 则导航栏移到网页头部。
如果屏幕宽度在400像素以下 则6张图片分成三行。
mediaqueri.es上面有更多这样的例子。
这里还有一个测试小工具 可以在一张网页上 同时显示不同分辨率屏幕的测试效果 我推荐安装。
二、允许网页宽度自动调整
"自适应网页设计"到底是怎么做到的 其实并不难。
首先 在网页代码的头部 加入一行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]-->
三、不使用绝对宽度
由于网页会根据屏幕宽度调整布局 所以不能使用绝对宽度的布局 也不能使用具有绝对宽度的元素。这一条非常重要。
具体说 CSS代码不能指定像素宽度：
width:xxx px;
只能指定百分比宽度：
width: xx%;
或者
width:auto;
四、相对大小的字体
字体也不能使用绝对大小（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的好处是 如果宽度太小 放不下两个元素 后面的元素会自动滚动到前面元素的下方 不会在水平方向overflow（溢出） 避免了水平滚动条的出现。
另外 绝对定位（position: absolute）的使用 也要非常小心。
六、选择加载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文件中加载。
[email protected] url("tinyScreen.css") screen and (max-device-width: 400px);
[email protected]
同一个CSS文件中 也可以根据不同的屏幕分辨率 选择应用不同的CSS规则。
[email protected] screen and (max-device-width: 400px) {
.column { float: none; width:auto; }
#sidebar { display:none; }
}
上面的代码意思是 如果屏幕宽度小于400像素 则column块取消浮动（float:none）、宽度自动调节（width:auto） sidebar块不显示（display:none）。
八、图片的自适应（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("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
不过 有条件的话 最好还是根据不同大小的屏幕 加载不同分辨率的图片。有很多方法可以做到这一条 服务器端和客户端都可以实现。
来源：爱蒂网
