css - 带有 % 的响应式 css 宽度

Question

我是 css 的初学者，我试图在电子书和谷歌中找到答案，但我找不到。所以请多多包涵 :D

我想创建一个响应式网站，所以这是我的 meta 标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

这是我的代码的一部分，其中包含一张宽度较大的图像:

<div id="desc">
        <img alt="" src="images/MallDetail/MallDesc.png">
</div>

为了使这个图像适合当前屏幕，我尝试使用 css 使其与当前屏幕的宽度一样大。但是，以下代码不有效:

#desc {
    width: 100%;
}

所以，我尝试了这个 css 及其工作:

#desc img {
    width: 100%;
}

我的问题是，为什么第一个 css 代码不起作用？它应该与第二个相同。它与我上面的 %? 或 meta 标签有关吗？

谢谢你的时间:D

Answer 1

#desc匹配 <div>并且不影响 <img> .