Html 媒体查询-使图像响应

我的页面上有很多图片，都是用线条连接的，比如：

$    $
 \  /
   $      ( Assuming $ is an image )
 /  \
$    $

当我在手机上查看此页面时，图像和线条都是分散的。现在使用媒体查询，如何使图像变小以适合手机屏幕，而不改变图像的位置。我只想改变他们的尺寸

---

谢谢

使用媒体查询非常简单，只需使用@media和所需的设备范围即可。然后在里面写下你想要应用于这个范围的css

img {
   width: 500px; // current width
   height: 500px; // current height
}

@media (max-width:767px){
 img {
   width: 200px; // new width for screen <768px
   height: 200px; // new height for screen <768px
 }
}

---

是的，使用媒体查询很简单 例如：

@介质（最小宽度：100px）和（最大宽度：1024px）

通过以这种方式使用，可以更改您的类或id，这正适合此移动视图

第二件事是不要在px中使用高度和宽度，而不要在%中使用，然后图像也会根据thw视口进行收缩

---

尝试并还原

谢谢Kiran:）…一个问题，我应该将@media代码放在哪里？放在标题或正文中？而不是直接将其添加到html文件中。将其添加到样式表中。如果style.css是您编写所有css的文件，请将其添加到该文件中。或者您可以添加另一个名为say reposive.css的文件，并将其添加到该文件中。请阅读此处，了解如何为文档添加样式：

<meta name="viewport" content="width=device-width, initial-scale=1">

@media (min-width:768px and max-width:1199px){
   // code for device screen between 768 and 1200px
}

@media (min-width:1199px){
   // code for device screen larger than 1199px
}