css响应式问题,图片随页面宽度等比例缩小该怎么设置

html-css029

css响应式问题,图片随页面宽度等比例缩小该怎么设置,第1张

手机响应式布局,是获取屏幕尺寸,在某个区间用一种css,另个区间用另一种css。需要用@media写多份css的。无法做到真正的随屏幕变化而变化。而的用法是随着屏幕的大小,自动把页面自适应到屏幕的大小。这个是管用的。em是字体的宽度,也就是一个字体宽12px,那么em=12px;字体为15px,em=15px;一般用来动态控制字体外的区块大小去适应字体,而不是用来设置字体的大小的。例如:如果没效果,建议你用图片贴出来,看看你想要的具体效果是什么。

1、首先图片分为背景图片和通过img标签引入的图片,前者可以通过media

query自动的切换不同分辨率的版本,但是在不支持background

image

size的浏览器中背景图片无法无级的调整大小(也就是在media

query切换css的点上可以换一张不同分辨率的图,但是没法儿获得两张分辨率中间大小的版本),而且在很多情况下(比如cms中)并不适合用背景图片。

2、是img标签引入的图片,可以使用延迟加载的方式来加载,在实际加载图片之前先用js检查窗口宽度,然后加载不同分辨率的图片,比如宽度<=480,就加载80px宽度的图片,480

<

宽度

<=

768,加载120px的图片,

宽度>

768则加载160px的图片,如果宽度是600px怎么办呢,通过百分比来缩放120px的图片达到合适的结果。这样做的好处是对于移动设备来说,下载的图片会小一些,减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。

3、响应式设计中对于图片的考虑应该从布局设计就开始,尽量使图片在各个窗口宽度下的尺寸不要相差过大,通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间。这样可以有效的减少图片放大模糊的问题。

4、图片设置

max-width

至于是不是要设置多张不同尺寸的图片

应该是看你的需求到底是针对哪些人群

如果设置多张建议两张就够了

设置一张稍微大点的

等比缩放也是不错的选择个人习惯是设置宽度跟max-width