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

Question

我的banner，切的1000像素的图片，给的宽度是100%，然后怎么让他到了1440px； 1280px； 1024px；的电脑上都能通屏显示呢？

Answer 1

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

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

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

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

恩恩，你说的办法，我有个网站就是那样用的，很好用，可这个网站一定要用它公司的图片，每一张都是实景图，都不一样，就不能共用一个背景了。

追答

你用带透明背景的PNG格式图片就可以了。。这样PNG图片的两端用透明渐变，不管什么背景都能融合得很好。

只需要在源图上做些修改，在两端加各加一个透明渐变的矩形，输出成32位带透明通道的PNG图片。

Answer 2

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

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

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

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

Answer 3

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

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

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

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

Answer 4

固定宽度的静态网站很快被灵活的响应式设计所取代，该设计可以根据屏幕大小进行上扩和下扩。利用响应式设计，无论采用什么设备或屏幕来访问网站，都可以呈现一个可用的界面。响应式设计可以响应各种屏幕大小，因此也成为了 “前瞻性” 的网站，屏幕将随着新的智能手机和平板电脑的问世而快速演变。实现响应式设计的主要途径是使用 CSS 媒体查询。在本文中，将了解如何将媒体查询用于桌面网站、移动电话和平板电脑。

<style>
@media screen {
body{ color: #f00; }
}
@media screen and (min-width: 960px) {
body{ background: #999; }
}
@media screen and (device-width: 1024px) {
.test { display: #E00; }
}
</style>

Answer 5

图片的宽度和分辨率是死的~~而电脑分辨率是活的，唯一的办法就是做几张不同宽度的图片，如1024，1280，1440，1920等等，然后通过js去对系统分辨率进行判断，对接相应的css文件，而每个css是对接不同宽度的图片，应该知道个大概了吧~我知道的就是这个办法了追问

可是完全不会js和jq。