为什么我的图片宽度不能随着显示器的大小而改动-ZOL问答

3个回答默认排序

默认排序

按时间排序

tubo1999

已采纳

PC浏览器，手机浏览器，不同屏幕大小，web页面不仅要适应浏览器兼容，还要适应屏幕大小。有可能为了移动端，再从新做一套页面，很麻分。

下面我来说说通过注意使用CSS的方式，在一定程度上进行屏幕自适应，避免浏览器屏幕适应问题。

首先，使用一个viewport:

meta
name=viewport content=width=device-width, initial-scale=1
/

!--上面这行代码的意思是，网页宽度默认等于屏幕宽度--

2，不使用绝对宽度：width:xxx
px;，可以使用em或%代替，字体也一样

3.
推荐使用Float，也就是流动布局。这样可以将多出来的部分浮动到下面。

4. 适当使用overflow，不滥用。

5. 选择加载CSS:

link
rel=stylesheet type=text/css
media=screen and (max-device-width: 400px)
href=tinyScreen.css /

上面的代码意思是，如果屏幕宽度小于400像素(max-device-width:
400px)，就加载tinyScreen.css文件。

link rel=stylesheet type=text/css
media=screen and (min-width: 400px) and (max-device-width:
600px)
href=smallScreen.css /

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

7. 使用@media：

@media screen and (max-device-width: 400px) {

.column {
float: none;
width:auto;
}

#sidebar {
display:none;
}

}

8. 图片自适应：

img
{ max-width: 100%;}

或

img, object { max-width:
100%;}
你看了这个，就会明白。

取消评论