怎么让css随电脑像素尺寸自适应?

html-css015

怎么让css随电脑像素尺寸自适应?,第1张

第一步:你的这个banner,要设计成左右两端可以与页面背景相融合的那种形式。比如左右两端都用了渐变透明,看上去与整个网页的背景融合在了一起。

第二步:这个1000px的banner,在屏幕上居中显示。然后不管你的显示器分辨率多宽,它都会居中。

通过这种方式。这个1000px的banner,让人看上去不分显示器分辨率多大,都是通屏显示了。。。

没有其他的办法。除非你不在意图片变形,在网页中用一段js来取当前浏览器的实际宽度,然后用js来改变这个banner的width值。但这样图片会变形的(即便你用等比例缩放,但是放大后图片失真了)

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

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

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