html - 在屏幕尺寸上隐藏 div id

Question

您好，提前致谢 我想在移动设备上隐藏一个 div id 并创建最小屏幕尺寸。任何小于 997px 宽度的东西都是我想隐藏 div id 的地方。

我的 CSS

@media only screen and (min-device-width : 997px) {
    #DIV_1 { display:none; }
}
#DIV_1 {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    cursor: default;
    height: auto;
    position: relative;
    width: 222px;
    perspective-origin: 111px 279.5px;
    transform-origin: 111px 279.5px;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal normal 16px/16px Arial, Helvetica, sans-serif;
    margin: 0px 0px 30px;
    outline: rgb(51, 51, 51) none 0px;
}/*#DIV_1*/ 

这是链接 https://www.superherodigital.com/services/graphic-design/

灰色侧边栏是 DIV_1

Answer 1

您目前正在使用 min-device-width: 997px这意味着 #div_1如果屏幕尺寸大于 997px 应该被隐藏.您应该改用 (max-width : 997px)和 @media-query应该放在样式表的末尾。

将此代码添加到您的样式表中:

#DIV_1 {
     display: block;
     box-sizing: border-box;
     color: rgb(51, 51, 51);
     cursor: default;
     height: auto;
     position: relative;
     width: 222px;
     perspective-origin: 111px 279.5px;
     transform-origin: 111px 279.5px;
     border: 0px none rgb(51, 51, 51);
     font: normal normal normal normal 16px/16px Arial, Helvetica, sans-serif;
     margin: 0px 0px 30px;
     outline: rgb(51, 51, 51) none 0px;

@media (max-width : 997px) {
     #DIV_1 { display:none; }
}