编写Web前端代码的注意事项小结
编写Web前端代码的注意事项，一些很重要的细节。
1.　最好在html标签之前添加一句类似于 　　&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd& & 　　的代码，该代码表示遵循W3C的某一套标准，具体使用哪套标准因人而异。 　　使用该标准的好处是不用再为各种不同浏览器环境下网站的布局不一样的问题而烦恼。使用该标准后，笔者在IE8、FF、Safari浏览器环境下测试，结果页面显示均正常。另外，发现使用该标准后包括一些IE本身的bug也不再出现，如IE默认div框的高度要大于字体高度的bug，在遵循该标准后就不再出现。 　　在遵循该标准后需要注意的一点是，有些写的不规范的代码可能就不能正常工作。例如在javascript中有roll1right.innerHTML = roll1left.innerHTML;的代码，其中roll1right和roll1left是网页上两个不同div的id，在没有套用该标准的情况下网页可以工作，但在W3C标准下该语句就出现bug。原因是W3C要求所有的变量都有明确的赋值，因此必须在该语句之前加上var roll1right = document.getElementById(&roll1right&);的语句，随后代码全部正常工作。 2.　在网页中使用div和table时，发现：虽然同样可以通过css设置div和table的border、margin、padding都为0，但是div显示正常的同时，table仍然会有一定的空隙。查询了W3CSchool后发现，原来table有cellpadding和cellspacing两个属性，其中cellpadding属性规定单元边沿与内容之间的空白，而cellspacing属性规定了单元之间的空白。于是将网页中的table的cellpadding和cellspacing两个属性都设为0，果然网页的table不再有空隙，问题解决。您的位置： &
　　随着 3G 的普及，越来越多的人使用手机上网。
　　移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？
　　手机的屏幕比较小，宽度通常在 600 像素以下；PC 的屏幕宽度，一般都在 1000 像素以上（目前主流宽度是 ），有的还达到了 2000 像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
　　很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个 mobile 版本，或者 iPhone / iPad 版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个 portal（入口），会大大增加架构设计的复杂度。
　　于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
　　一、"自适应网页设计"的概念
　　2000年，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: xx%;
　　四、相对大小的字体
　　字体也不能使用绝对大小（px），而只能使用相对大小（em）。
font: normal 100% Helvetica, Arial, sans-
　　上面的代码指定，字体大小是页面默认大小的 100%，即 16 像素。
font-size: 1.5
　　然后，h1的大小是默认大小的1.5倍，即 24 像素（24/16=1.5）。
font-size: 0.875
　　small 元素的大小是默认大小的0.875倍，即 14 像素（14/16=0.875）。
　　五、流动布局（fluid grid）
　　的含义是，各个区块的位置都是浮动的，不是固定不变的。
width: 70%;
.leftBar {
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) {
#sidebar {
　　上面的代码意思是，如果屏幕宽度小于 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: }
　　或者，Ethan Marcotte 的 。
addLoadEvent (function () {
var imgs = document.getElementById ("content") .getElementsByTagName ("img");
imgSizer.collate (imgs);
　　不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有可以做到这一条，服务器端和客户端都可以实现。
上一篇：下一篇：后使用快捷导航没有帐号？
只需一步，快速开始
查看: 11597|回复: 7
实现1024px，1280px，1440px，..宽度显示器下面网页宽度的自适应
UID473326在线时间 小时积分1886帖子离线16735 天注册时间
银牌会员, 积分 1886, 距离下一级还需 1114 积分
电脑显示器是有大有小，浏览器的最大宽度也是跟着显示器去的，可是网页呢，一般宽度都是定的死死的，好在现在800px宽的显示器基本上去淘汰了，所以网站页面基本上都是1000px的宽度，我的显示器是1440px宽的，所以现在这个写文章的页面两边分别有我一个食指长的宽度，稍微有点宽哦。但是对使用一点影响都没有的啦~~可是呢，有时候希望在各个大小的显示器下达到同样的比例效果，怎么半呢？我最早看到宽屏，窄屏切换的页面是在hao123网站上，可是一看代码，有点小小的失望，原来是两套css，通过js切换的啦，没有什么高深的，会用js实现换肤技巧的这个也应该会啦。
后来又发现一个地方网页自适应，是一套css，放大缩小浏览器窗口都不会有错位，而且中间那块大小会自动的缩放，可是一看代码，有点心凉哦，大大的table标签，原来是表格，确实，表格本身就有自适应的功能，可能我不喜欢表格，让我觉得很乱很烦，其实归根结底是我表格技术很不行，所以从心底不喜欢它。ok，这种table的方法我决定不用了。就自己着手吧，哦，忘说了，那个宽度自适应的网站是，有兴趣可以去参考参考。
现在讲讲我吧，看雅虎的那个自适应网站对我有帮助的，知道了自适应后网页到底该是个什么样子，该怎么判断。所以现在开动自己的脑筋，结合平时积累的些知识一步一步的实现它了。
下面我要提两个关键字百分比宽度，最小宽度
好，一步一步来，先看看单纯的使用百分比的自适应框架
&title&宽度自适应1&/title&
&style type=&text/css&&
.content{width:100%; height:800 }
.left{width:22%; height:500 background:#0066CC; float: }
.center{width:50%; height:500 float: margin-left:10 background:#993300;}
.right{width:22%; height:500 float: margin-left:10 background:#CC9900;}
&div class=&content&&
&div class=&left&&&/div&
&div class=&center&&&/div&
&div class=&right&&&/div&
不管浏览器是1024px宽的，还是1280px或是1440px的，进入后都会看到图示的效果，好像还不错，可是如果把浏览器的宽度压缩至很小呢？——
大哥大姐们，我只能说不好意思了。它跟着缩小了，甚至最后挤到下面去了~~
看来单纯的宽度百分比是不行了，那该怎么办呢？你不想吗？这挤下去是应为百分比它比的是浏览器的宽度，这浏览器宽度小了那你有什么办法，可是要是这个百分比比的是外面的一个标签，而且这个标签给它限定个最小宽度，那岂不....
有了想法了，该怎么实现呢，好像有个css标签是min-width，对，就是这个min-width，firefox火狐支持这个，IE7也支持这个，但是IE6不听话啊，不支持此标签，那该怎么办呢，好在IE下有个expression行为表达式实现js的效果，所以可以用expression实现IE6下的最小宽度了。现在看下面增加了最小宽度限制的代码：
&title&宽度自适应1&/title&
&style type=&text/css&&
.content{width:100%; height:800 min-width:980 width:expression((documentElement.clientWidth & 980) ? &980px& : &100%& ); }
.left{width:22%; height:500 background:#0066CC; float:}
.center{width:50%; height:500 float: margin-left:10 background:#993300;}
.right{width:22%; height:500 float: margin-left:10 background:#CC9900;}
&div class=&content&&
&div class=&left&&&/div&
&div class=&center&&&/div&
&div class=&right&&&/div&
先看看IE7下的效果：
嘿，不错，你看那左边，好像到200px左右就不再缩小了，成。
看看麻烦的IE6下面的效果。
这是进去后的页面样子：
这是把浏览器缩到很窄的时候的样子：
我的妈啊，怎么就成了呢？
看看firefox火狐浏览器，照理来说应该没有问题，IE7都行，她也应该没得问题的。
最后检验一下chrome谷歌浏览器就可以宣布成功啦。
还有opera，
至此，我可以放心的宣布，宽度自适应框架测试成功。
不忙高兴太早，现在仅仅是个框架成功而已，一旦里面在写入东西，估计又会有不少新问题的，不管怎样，开动脑筋，一步一步解决，最后都会没有问题的。
本帖子中包含更多资源
才可以下载或查看，没有帐号？
UID497285在线时间 小时积分1308帖子离线16735 天注册时间
银牌会员, 积分 1308, 距离下一级还需 1692 积分
CSS三列布局，左右宽度固定，中间自适应宽度
&div style=&width:90%; margin:0&&
& &&div style=&width:200 float: &这是右侧的内容 固定宽度&/div&
& &&div style=&width:150 float: &这是左侧的内容 固定宽度&/div&
& &&div style=& margin-left:160margin-right:210&中间内容，自适应宽度&/div&
简单的问题，切忌不要搞复杂。
[[i] 本帖最后由 anan360 于
13:05 编辑 ]
UID498325在线时间 小时积分377帖子离线16735 天注册时间
中级会员, 积分 377, 距离下一级还需 123 积分
回复 2# anan360
UID491415在线时间 小时积分1300帖子离线16735 天注册时间
银牌会员, 积分 1300, 距离下一级还需 1700 积分
这个的确挺讨厌，
&div style=&width:90%; margin:0&&
&div style=&width:200 float: background-color:#960&&这是右侧的内容 固定宽度&/div&
&div style=&width:150 float: background:#6FF&&这是左侧的内容 固定宽度&/div&
&div style=&margin-left:160margin-right:210 background-color:#9F3&&中间内容，自适应宽度&/div&
&提示：您可以先修改部分代码再运行
overflow :
&div style=&width:90%; margin:0&&
&div style=&width:200 float: background-color:#960&&这是右侧的内容 固定宽度&/div&
&div style=&width:150 float: background:#6FF&&这是左侧的内容 固定宽度&/div&
&div style=&margin-left:160margin-right:210 background-color:#9F3; overflow:hidden&&中间内容，自适应宽度&/div&
&提示：您可以先修改部分代码再运行
本帖子中包含更多资源
才可以下载或查看，没有帐号？
UID441382在线时间 小时积分434帖子离线16735 天注册时间
中级会员, 积分 434, 距离下一级还需 66 积分
UID520520在线时间 小时积分206帖子离线16735 天注册时间
中级会员, 积分 206, 距离下一级还需 294 积分
expression((documentElement.clientWidth & 980) ? &980px& : &100%& )
这种方法，有时候是会耗内存的，而且会使IE6崩掉
也是和楼主所说的布局。但不知道有谁知道它是如何实现的。
[[i] 本帖最后由 zxw9184 于
15:54 编辑 ]
UID352426在线时间 小时积分6849帖子离线16735 天注册时间
自适应宽度的布局不适合做美工比较强的网页
UID496603在线时间 小时积分1664帖子离线16735 天注册时间
银牌会员, 积分 1664, 距离下一级还需 1336 积分
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
&style type=&text/css&&
.l-sidebar {
height:500
background:
.mainbar {
margin-left:200
height:500
margin-right:200
background:
.r-sidebar {
height:500
background:
&div class=&l-sidebar&&&/div&
&div class=&mainbar&&&/div&
&div class=&r-sidebar&&&/div&
&提示：您可以先修改部分代码再运行
Powered by