css控制页面再不同分辨率下显示相对大小

Question

如：我在1280*1024分辨率下设计的网页高700px,宽100%；如何在1024*768中显示正常没有滚动条，通俗点说就是在1280*1024中看到的网页大小，然后再1024*768中看到的网页大小比例就是1280*1024:1024*768

Answer 1

这个可以通过布局和样式解决：
方法一：所有布局用百分比布局，这种方法是比较传统的。

方法二：百分比和em（一个字符的单位）相结合的；

方法三：rem为单位来写样式，需要借助JS来根据分辨率的大小调整rem;

方法四：布局用rem单位，而字体用em.

第1、2两种方法是比较传统，网上随便搜搜就找得到了；第3种开始用到的rem，rem是css3新出的一种样式属性单位，类似PX；但是rem是可以人为设置大小的，也就是说rem这个单位的大小是可以设置,基于这个特性，再通过JS来根据分辨率控制这个rem的单位大小；
JS代码：

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 40 * (clientWidth / 1080) + 'px';
console.log(40 * (clientWidth / 1080))
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

这边的40是rem的自己需要单位大小（自己根据需求设置的，如果需要甚至可以改成10）；
这边的1080是设计效果图的大小，如果设计图是以宽度为2000的话，那么这边的1080就改成2000；

而em用来做字体单位的话，就可以根据不同的显示器（手机自身的设定）来显示字体，不会出现字体大的离谱，或者小的看不见的状况；
不过rem因为是CSS3的属性，在PC端的兼容性很差，不建议使用，但是移动端是非常适合的，总结就是PC端：方法一、方法二，移动端：方法三、方法四

Answer 2

不能做到，首先要说明的是，网页制作后必须经过不同分辨率调试效果。是要你的网页适应大多数显示器正常浏览。网页设计好的宽度是固定的，不能象你那样设置100%，否则就会内容错位或者窗口下边出现横向滚动条。

现在主流网页设计宽度在800-1000PX之间，固定宽度值。然后让内容居中，这样在不同分辨率的显示器下观看就正常了。和你相反高度应该按百分比设置，按内容多少自调节网页高度。
都是根据内容多少自适应高度，几乎没有那个网站高度固定然后用横向滚动条来找宽度吧。

你可以到各网站的首页去看一看，基本都是宽度800-1000PX，内容居中两侧留白（可以放悬浮广告），整体高度不设置具体像素。
.CSS是精确控制像素的，试想你做出来的网页像素是固定的，不可能在分辨率低的浏览器上按比例缩放观看到相同效果。本回答被提问者和网友采纳

Answer 3

1.采用定长定宽的布局。规划好页面的各部分元素大小。精确到px。然后整体居中，两侧留白。这样分辨率不一样，只会影响留白部分的大小。居中部分在各分辨率下显示效果一致。

2.比较少用。就是采用流式布局。页面的各部分都是按照百分比去设置的。这样分辨率不一样的情况下。效果都是一致的。但是比较难以掌控。编码难度大，测试困难。因此较少采用。

3.另外，针对不同移动设备下，不同分辨率通常采用服务端判断设备类型，然后加载相应css去实现不同设备访问自适应

Answer 4

首先，你要确定你的body俩个参数
margin：0
padding：0
然后宽度设置成100%
高度的问题你只能设置一个最低高度，因为内容你无法控制，除非你想设成固定高度，但是你设成固定高度肯定就不能兼容这俩个尺寸1280*1024:1024*768，所以你可以实现自适应宽度

Answer 5

所有宽度 和高度 用百分比或者em写，不定义body的最大值或最小值。