html - 媒体查询 - 使图像响应

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。因此将帮助您为移动访问者设置正确的 View 。

其他媒体查询规则:

@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
}