如何让html页面在使用浏览器进行缩放的时候布局不会出现混乱？
[问题点数：40分，结帖人qinglinglaoren]
如何让html页面在使用浏览器进行缩放的时候布局不会出现混乱？
[问题点数：40分，结帖人qinglinglaoren]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
本帖子已过去太久远了，不再提供回复功能。自适应网页设计（Responsive Web Design） - 阮一峰的网络日志
自适应网页设计（Responsive Web Design）
随着3G的普及，越来越多的人使用手机上网。
移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
一、"自适应网页设计"的概念
2010年，Ethan Marcotte提出了（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如果屏幕宽度在400像素以下，则6张图片分成三行。
上面有更多这样的例子。
这里还有一个，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。
二、允许网页宽度自动调整
"自适应网页设计"到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行。
　　&meta name="viewport" content="width=device-width, initial-scale=1" /&
是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用。
　　&!--[if lt IE 9]&
　　　　&script src="http://css3-mediaqueries-/svn/trunk/css3-mediaqueries.js"&&/script&
　　&![endif]--&
三、不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，CSS代码不能指定像素宽度：
　　width:
只能指定百分比宽度：
　　width: xx%;
　　width:
四、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
　　body {
　　　　font: normal 100% Helvetica, Arial, sans-
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
　　　　font-size: 1.5
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
　　small {
　　　　font-size: 0.875
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
五、流动布局（fluid grid）
的含义是，各个区块的位置都是浮动的，不是固定不变的。
　　.main {
　　　　float:
　　　　width: 70%;
　　.leftBar {
　　　　float:
　　　　width: 25%;
的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
六、选择加载CSS
"自适应网页设计"的核心，就是CSS3引入的模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的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);
七、CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
　　@media screen and (max-device-width: 400px) {
　　　　.column {
　　　　　　float:
　　　　　　width:
　　　　#sidebar {
　　　　　　display:
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
八、图片的自适应（fluid image）
除了布局和文本，"自适应网页设计"还必须实现图片的。
这只要一行CSS代码：
　　img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
　　img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：
width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的：
　　img { -ms-interpolation-mode: }
或者，Ethan Marcotte的。
　　addLoadEvent(function() {
　　　　var imgs = document.getElementById("content").getElementsByTagName("img");
　　　　imgSizer.collate(imgs);
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有可以做到这一条，服务器端和客户端都可以实现。
上一篇文章，我介绍了 Systemd 的主要命令，今天介绍如何使用它完成一些基本的任务。
Systemd 是 Linux 系统工具，用来启动守护进程，已成为大多数发行版的标准配置。
"守护进程"（daemon）就是一直在后台运行的进程（daemon）。
Git 每次提交代码，都要写 Commit message（提交说明），否则就不允许提交。[转]HTML5在旧版浏览器中出现布局错乱的解决方法
自HTML5标准的提出就得到非常多的关注，而作为全球使用用户最多的IE浏览器能够支持HTML5标准也是大家备受关注一个问题，上周微软在技术大会上就表示目前微软正在开发的IE9将更加支持HTML5标准，但对于IE9是否将完全支持HTML5所有的标准，微软却表现的有点含糊其辞。HTML5标准能为网页带来更高效更洁净的代码，只有微软参与HTML5的设计工作，才能让IE浏览器识别更多的新元素。
HTML5标准预计是在2022年向全世界发布，虽然目前距他发布的日期还有3年左右的时间，但是我认为它距离我们并不是那么遥远，目前很多网站的设计和开发都是在采用HTML5的标准。在HTML5标准的制定和推广方面，苹果、Google、Opera和Mozilla等知名的浏览器厂商都表现的比较积极，微软现在也开始付出行动了，从上周微软在技术大会公布的IE9细节来看，微软将采取一种谨慎的态度涉足网页标准。微软也曾表示：。但是微软的最新及以下IE版本对HTML5标签的支持是有限的，我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。
让IE(包括IE6)支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document_createElement_x声明，利用条件注释针对IE来调用这个js文件。Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。
&!--[if IE]&
src="/svn/trunk/html5.js"&&/script&
& ![endif]--&
上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。
这个html5的js文件是作者把他放在Google code
project上提供给大家可以直接调用的，当然，如果觉得这样会影响你的网页打开速度，你可以把html5的js文件直接下载下来让后上传到自己的服务器单独调用。
以下是html5的js文件中的代码:
(function(){if(!0)var e =
"abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.while(i--){document_createElement_x(e[i])}})()
除了在网页中调用包含以上代码的js文件来让IE浏览器支持HTML5元素以外，你也可以以下面这种方式把代码直接添加到网页中。
&!--[if IE]&
(function(){if(!0)var e =
"abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.while(i--){document_createElement_x(e[i])}})()
& /script&
& ![endif]--&
IE开发经理艾德里安巴特曼（Adrian Bateman
）就曾表示，IE团队希望分享自己对HTML5的看法，并参与制定该标准的讨论。巴特曼表示，尽管目前IE团队更多是提出问题，而非给出解决办法，但是公开讨论正是推动HTML5发展的最佳方式。相信无论IE浏览器是否能够继续支持HTML5标准，HTML5标准在全球广泛的使用已经是大势所趋。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。如何用HTML5编写页面? - 快了 - 博客园
随笔 - 45, 文章 - 0, 评论 - 0, 引用 - 0
在介绍HTML5布局之前，我们先了解一下几个名词的概念。
　　大纲：
　　所谓大纲简单说就是文档中各内容区块的结构编排。内容区块可以使用标题元素(h1~h6)来表示各级内容区块的标题，综合运用各级内容区块的标题创建好文档的目录后，该目录就是一个大纲了。
　　显示编排：
　　是指明确使用section等元素创建文档结构，在每个内容区块内使用标题(h1~h6)。
　　隐式编排：
　　是指不明确使用section等元素，而是根据页面中所书写的各级标题(h1~h6、hgroup)等把内容区块自动创建出来。
　　下面介绍在HTML5中几种在页面布局时注意的细节：
　　1)显示编排内容区块
　　对于显示编排的概念，上面已经解释过了。下面我们举例说明：
　　2)隐式编排内容区块
　　举例说明：
　　从上面两种方式对比，显示编排更加清晰、易读。
　　3)标题分级
　　不同的标题有不同的级别，h1级别最高，h6级别最低。隐式编排时按下面规则自动生成内容区块：
　　? 如果新出现的标题比上一个标题级别低，生成下级内容区块。上面的例子已经说明。
　　? 如果新出现的标题比上一个标题级别高或级别相等，生成新的内容区块。下面举例：
　　如果将结构都改成显示编排，那么分析器就会自动按照编写的结构实现了。
　　因为隐式编排容易让自动生成的整个文档结构与想要的文档结构不一致，而且很容易引起文档结构的混乱，所以尽量使用显示编排的方法进行页面布局。
　　4)不同的内容区块可以使用相同级别的标题
　　父内容区块与子内容区块可以使用相同级别的标题h1。这样的好处是：每个级别的标题都可以单独设计，如果既需要&网页级的标题&，又需要&文章的标题&，这样做将会带来很大的便利性。举例：
　　5)新的结构元素样式调用
　　由于目前很多浏览器不支持HTML5中的多数新增元素，而且我们也不清楚客户端使用的浏览器类别，所以在编写CSS时追加如下声明：
　　目的是通知浏览器页面中使用的HTML5新增元素都是以块方式显示的。
　　其次，由于IE8及之前版本的浏览器是不支持CSS的方法来使用这些尚未支持的结构元素，为了在IE中能正常使用这些结构元素，需要使用JS来完成，如下代码：
　　如果浏览器支持HTML5中的结构元素，那么上面的这段JS脚本是没有必要的，但是它并不会对这些浏览器造成不良影响。
　　6)HTML5中，推荐使用article嵌套article的方式
　　一个页面中可以有多个独立的article元素，每一个article元素都允许有自己的标题和脚注等从属元素，并允许对自己的从属元素单独设置样式。如：
　　通过上面的讲解，你是不是对HTML5页面布局有了全新的认识?继续关注我们的教程，学习更多关于HTML5的内容。希望我们的教程为你在制作页面的道路走的更远!