Question

我的页面上有很多图像，并且都与行相关联，如下所示：

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

当我在手机上查看此页面时，图像和线条都是分散的。现在使用媒体查询，如何使图像更小以适应我的手机屏幕并且图像不会改变其位置。我只想改变它们的大小。

谢谢！

Answer 1

使用媒体查询非常简单，只需使用@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
 }
}

另外，请确保将以下代码添加到html标记的开头。

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

此单行将确保您的网页占用设备宽度的整个宽度，并将所有设备缩放重置为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
}

Answer 2

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

@media（min-width：100px）和（max-width：1024px）

通过这种方式使用，更改您的类或ID，这非常适合此移动视图

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

尝试并还原

媒体查询 - 使图像响应

2 个答案: