未指定的媒体查询

问题描述

我使用媒体查询在屏幕尺寸减小时隐藏元素。我将最大宽度设置为780px。

`@纯媒体屏幕和（最大宽度：780px）{

/* the container for #left and #right elements */
.container { 
  width: 300px;
  height: 400px;
  overflow: auto;
}

/* the element to be hidden */
#left {
  display: none;
}

/* this element should then take up the whole width of the container */
#right {
  width: 300px;
  height: 400px;
  border-radius: 2%;
}

}`

根据媒体查询，它的行为仅在770px及以下。

我还为#right包含了引导类 col-sm-12 col-md-6 。

在780px和770px之间，＃left被隐藏，但#right并未占据.container的全部空间。相反，#right占据.container的前半部分空间，该位置应为#left，而#right的原始空间将不被占用。

这是什么不必要的差距，我该如何消除？

解决方法

min-width和max-width有两件事，它的作用是 如果您使用(min-width:768)，则表示该设计将应用于大于768px的屏幕宽度，即768px-无穷大。 如果您使用(max-width:768)，则表示该设计将应用于屏幕宽度小于768像素（即0到767像素）的屏幕。

回到您的问题。

.container { 
width: 300px;
height: 400px;
overflow: auto;
}

在这里，您将容器的宽度指定为300px，将其更改为

.container { 
    max-width: 100%;
    width: 100%;
    height: 400px;
    overflow: auto;
    }

类似地，

#right {
  width: 100%;
  height: 400px;
  border-radius: 2%;
}

请帮助我。

,

尝试将宽度更改为100％，这样应该可以。

#right {
  width: 100%;
  height: 400px;
  border-radius: 2%;
}