@media min-width 失效

简介: @media screen and (min-width:768px){ .hidden-sm { display: none !important; }}768- 会显示 发现是c...
<style>

@media screen and (min-width:768px)
{
    .hidden-sm {
        display: none !important;
    }
}

</style>
<div class="hidden-sm" style="background-color:green;">768- 会显示  </div>




发现是chrome浏览器developer Tools 里的 toggle device toolerbar 的bug,
在工具里 调整宽度时,忽略了@media screen and (min-width:768px)
,在外面直接调整浏览器窗口宽度就正常

目录
相关文章
|
23天前
|
编解码 UED
媒体查询中 max-width 和 min-width 属性的作用
【10月更文挑战第24天】可以结合其他媒体特性,如高度、分辨率等,来进一步优化和定制媒体查询的效果。通过对这些属性的深入理解和灵活运用,我们能够更好地应对不同屏幕尺寸带来的挑战,打造出适应各种环境的优秀设计作品。
|
1月前
|
前端开发
min-width/max-width 和 min-height/max-height 属性间的覆盖规则
在CSS中,min-width/max-width及min-height/max-height属性用于控制元素的最小和最大尺寸。当min-width与max-width或min-height与max-height属性同时设置时,若它们的值有冲突,max-width和max-height具有更高的优先级。这意味着元素的实际宽度和高度将受限于max-width和max-height的规定,而min-width和min-height则确保了元素不会小于所设定的最小尺寸。
|
19天前
|
前端开发 容器
max-height 属性和 min-height 属性有什么区别?
【10月更文挑战第27天】`max-height`属性和`min-height`属性在控制元素高度方面各有特点和适用场景,通过合理地运用这两个属性,可以更灵活地实现各种页面布局效果,满足不同的设计和功能需求。
Limits: MIN_INFLATE_RATIO: 0.010000, Entry: word/media/image5.png
Limits: MIN_INFLATE_RATIO: 0.010000, Entry: word/media/image5.png
243 0
display:none到display:block失效问题及解决办法
display:none到display:block失效问题及解决办法
347 9
|
前端开发
响应式 - 基于min-width和max-width属性的响应式布局
响应式 - 基于min-width和max-width属性的响应式布局
241 0
响应式 - 基于min-width和max-width属性的响应式布局
gdk_screen_get_scale_factor已经淘汰,改成gdk_screen_get_monitor_scale_factor
gdk_screen_get_scale_factor已经淘汰,改成gdk_screen_get_monitor_scale_factor
116 0
|
Web App开发 前端开发 流计算