网页的div宽度如何适应不用分辨率的显示器？

Question

我做网页，为了能适应不痛显示器的分辨率，我用了 95%，但是问题是这样做了 缩小浏览器的窗口就变形，用固定宽度如width:1024 又不能适应所有的分辨率，请问该怎么办呢？

非常急，在线等答案中！！！

Answer 1

你写95%的原因无非是根据你当前的分辨率的设计效果来设定的，比如你现在的分辨率是1280*768；那你设定95%的宽度然后居中就合理了，但是你又想考虑其他分辨率，其实解决方式很简单，你无非就是想让页面对浏览器窗口有一定的间距，那你可以在页面这个div上设定例如margin:0 50px;这样的处理间距问题应该说是最佳的
而你上面也说到了窗口缩小页面就变形了，那就说明你的页面应该是全部用了 float:left;并且固定每个标签的宽度来布局的，这种布局方式虽然代码简洁，但是要求整个页面的框架宽度要固定，否则要自适应分辨率来调整宽度，那页面布局会很容易错乱；要解决这一问题也比较简单，就比如处于同一行的3个div，你可以根据页面的情况设定左边div左浮动，右边的div右浮动，中间的设定margin-left:（左边div宽度）;margin-right:（右边div宽度）;这样中间的div就可以自动伸展；
当然，我这里只是举一个小例子，具体怎么布局还得根据你自己的情况，如果你不希望有标签自动伸展，因为自动伸展的页面比较难掌控，有人显示器比较大的话，分辨率超高的那种，页面伸展太大就会变的难看，所以固定页面和标签的宽度是绝大部分网页的固定布局模式；
在设计页面平面稿的时候，大家也要注意一下，我想现在大部分人使用的分辨率应该至少是1280*768（我本人的是1600*900），所以设计页面的时候可以以宽度1280来设计，当然也得考虑1024的宽度，设计可自动伸展的页面，并且要照顾到各个分辨率的美观程度，这就需要花点心思了追问

朋友，你好，你想、说的非常好，本人自学的网页设计，现在工作中，能不能和学习学习呢？

追答

现在处于自学阶段的话，如果你有公司以前的项目文件的话，你可以认真的看看人家是怎么做的，刚学习的人最困扰的地方就是CSS属性的定义问题，就是看别人写的样式不明白为什么要用那个样式，放那个样式的作用意义在哪不是很明白；这个我本人也经历过，要走出这个困扰就要认真的理解常用的一些css属性，其实div+css说白了就是css控制div的高度、宽度、颜色、背景、边框、位置、边距等来构成一个界面的；
我可以列一些常用css样式出来（多个样式的简写），这些是写页面经常要用到的，其他的不作说明，我不能全部列举
1、background:url(../images/背景图片) 0 0 no-repeat; 背景样式的简写
2、margin:0 10px 0 10px; = margin:0 10px; 边距的简写，这个写法一般用具标签的居中
3、font:bold 12px Arial, Helvetica, sans-serif; color:#fff; line-height:33px; 这个是我习惯的字体写法
4、border:1px solid #000; 边框的简写
5、padding:5px; 内边距，如果写了固定高度和宽度的标签加了这个属性，那整个标签的总宽度和高度要加上内边距的值，例如 总宽度100px=width:90px+10px;

除了上面很常用的样式外，还需要属性一下下面的一些属性，对解决布局问题很有帮助；
overflow:hidden; vertical-align:middle; 有点忘记了，只记得这2个了
具体的还得自己碰到问题的时候再查找解决方案，在解决问题的时候就是学习的时候

Answer 2

全部用百分比.因为你是要针对不同浏览器的.但这样就比较麻烦.就是说你里面的层也要用相应的百分比才行.

Answer 3

老老实实用绝对尺寸，width:1004px;(不是1024，要减去20px的滚动条宽度)

用百分比做自适应，老外那种页面简洁的布局还行。这个在中国不适用，我们的网页内容太多了，要保证效果在各种分辨率下统一，光靠css很难处理好，等你把css和js都学得滚瓜烂熟了再去想那个东西。以前试过做类似QQ门户的页面，得不偿失，为了一个小地方换分辨率后效果好，就得写大段js，开发效率爆慢，不便于修改维护，加载大量多余js。

Answer 4

用变量，变量值从当前分辨率的宽度里边取值