CSS媒体查询和选择器[重复]

Posted 2023-03-06

【中文标题】CSS媒体查询和选择器[重复]

【英文标题】：CSS Media Queries & Selectors [duplicate]

【发布时间】：2014-07-05 07:45:11

【问题描述】：

如果我正确理解媒体查询，代码如下：

@media (max-width:900px)...

基于 html 标签 + 垂直滚动条（如果可见）运行。 我想知道是否有可能让它以某种方式读取不同的选择器。

也许是这样的：

@media (#selectormax-width:900px)...

编辑：我知道 jQuery 一切皆有可能，我不是在寻找 jQuery 解决方案。

温暖。

【问题讨论】：

不，不可能。你应该使用 JS。或者提供更多 HTML 内容的代码，以便我们尝试为您的案例制定解决方法

您可能也有兴趣阅读this

“基于 html 标签 + 垂直滚动条（如果可见）运行” – 不。基于宽度的媒体查询的基础是 viewport。

但你可以有 #selector @media (max-width:900px)...

不，视口是用于在浏览器中显示页面的区域。 w3.org/TR/CSS21/visuren.html#viewport（而html 元素可以比这更宽。）

【参考方案1】：

@medi 用于检测视口大小。如果您需要检查当前选择器是否小于 900 像素，则需要使用 jQuery 进行检查。..

$(window).load(function()

 var selectorWidth = $('#selector').width();

 if(selectorWidth <= 900) 

  /****do something here******/



)

或者你可以在

中做同样的事情

$(document).ready(function()

var selectorWidth = $('#selector').width();

 if(selectorWidth <= 900) 

  /****do something here******/



)

但最好在加载窗口后进行