Question

我遇到了css和响应问题我认为我的网站反应灵敏，但唯一令我困惑的是我滑块上的img。

这是我的网站：www.spc.id

我认为滑块上的img没有响应，因为它在手机屏幕上不友好。

我尝试使用媒体查询来调整宽度和高度：

<style>
@media only screen and (max-width: 639px) and (min-width: 480px){
#home-hero{
    width: 480px;
    height: auto;
    padding:90px;
  }
}

</style>

我可以自定义高度，但为什么我不能自定义宽度？谢谢你，如果你不介意帮助我！

Answer 1

很难说没有更多信息，但我注意到您网站源代码中的一些内容。

1）您的媒体查询在语法上是正确的，但不清楚为什么您有一个最小宽度规则。除非您对宽度小于480px的屏幕有其他媒体查询，否则应该消除最小宽度规则。试试这段代码：

@media only screen and (max-width: 639px){
#home-hero{
    width: 480px;
    height: auto;
    padding:90px;
  }
}

你可以玩这个jsfiddle，希望澄清我的意思。 https://jsfiddle.net/8nzatewL/

2）看起来你正在使用bootstrap，但是你的班级名字中有一个拼写错误。变化：

<div class='contai ner'>

为：

<div class='container'>

img是否可以根据屏幕尺寸调整宽度和高度？

1 个答案: