我最近开始学习html和CSS。特别是，我正在学习自适应网页设计。我研究了元视口标记是创建响应式Web设计的第一步。特别是，我正在通过此链接进行研究：
https://www.w3schools.com/css/css_rwd_viewport.asp
这里，他们在带有和不带有视口标签的移动屏幕上给出了网站的两个图像。在第一个没有屏幕的情况下，图像不会随着具有屏幕的情况而自行调整。但是在后一个图像中，图像会自行调整。现在，我明白了。我想到了使用以下命令来复制它：
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src="jeff.jpg">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing sof</p>
</body>
</html>
当我改变宽度时，它不会使图像改变。那么，这是怎么回事？
我知道，我可以通过放置一个宽度为100％的CSS块来解决此问题，但我想了解为什么视口不能像网站上提到的那样工作。还是我缺少任何重要的东西？
浏览器的视口是窗口中可以看到Web内容的区域。
width属性控制视口的大小。可以将其设置为特定的像素数，例如width = 600或特殊值device-width，它是CSS像素的屏幕宽度，缩放比例为100％。
initial-scale属性控制页面首次加载时的缩放级别。
现在，要使图像具有自然响应性，我们应该始终使用viewport-relative units，即%
因此，您应该添加
img {
width: 100%;
height: auto;
}
使图像与屏幕尺寸一起调整大小。希望它能澄清您的疑问！
视口元素为浏览器提供了有关如何控制页面尺寸和缩放比例的说明。
width = device-width部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。
initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。