媒体查询 - 使图像响应

我有很多我的网页上的图像，并都与线路连接，这样的：媒体查询 - 使图像响应

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

当我查看我的手机上这个网页，图像和线都是分散的。现在使用媒体查询，我怎样才能使图像更小，以适应我手机的屏幕，并且图像不会改变其位置。我只想改变它们的大小。

谢谢！

来源

2016-10-04 user6918687

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

来源

2016-10-04 04:50:20

感谢基兰:) ..有一个问题，我应该在哪里把@media代码？..在页眉或身体？ – user6918687

而不是直接将其添加到您的HTML文件。将它添加到样式表。如果style.css是你所写的所有css文件，然后将它添加到那里。或者你可以添加另一个名称为reponsive.css的文件并将其添加到那里。请在这里阅读如何添加样式到您的文档：http://www.w3schools.com/css/css_howto.asp –

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

@media（最小宽度：100像素）和（最大宽度：1,024）

通过这种方式使用改变你的类或id这正是适合这个移动视图

第二件事是不使用高度和宽度在PX而非％的人使用，则图像也被基于THW视收缩

尝试并恢复

来源

2016-10-04 04:57:49 Prathap

好吧Prathap会给它一个尝试:) – user6918687

媒体查询 - 使图像响应

回答

相关问题