识别屏幕大小更改

时间：2015-09-06 作者：RGriffiths

我试图了解我正在使用的Wordpress主题发生了什么。菜单位于页面的右侧，当窗口变小时，它会从中间变为一个下拉菜单（对于较小的设备）。在检查中，我可以看到有各种类别似乎可以处理外观：

.menu-toggle,
.main-small-navigation ul.nav-menu.toggled-on {
display: block;
    background-color: #fff;
}

.navigation-main ul {
    display: none;
}

.menu-toggle {
background-color: #FAFAFA;
    border-top: 1px solid #F0F0F0;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
    color: #1e1e1e;
etc etc 
}

当屏幕尺寸减小时，使用主要的小型导航类，一切正常。当屏幕放回原位时，菜单显示不正确。

我想弄清楚的是，当你改变屏幕的大小时，这些是如何被调用的。我意识到这可能是一个模糊的，可能是特定主题的，但任何关于我应该寻找什么的建议都将不胜感激。

2 个回复

最合适的回答,由SO网友:Pieter Goosen 整理而成

这称为响应式设计，与Wordpress无关，它是媒体查询的扩展规则（@media）在CSS3中。CSS是一种浏览器/客户端语言，它可以确定窗口大小和浏览器类型，这是用来确定网站应该如何看待特定的窗口大小或浏览器的。此媒体查询在CSS中指定时，将用于相应地将特定项目调整为所需的设置大小

一些主题还将javascript与CSS结合在一起，以便在不同的窗口大小和浏览器类型上以不同的方式显示HTML选择器。

我不打算深入讨论更多细节，因为这确实不是Wordpress特有的，您应该花时间阅读响应性设计和媒体查询

SO网友:iulia

这个@media 查询用于根据窗口大小更改样式。

窗口最小宽度为800px时更改桅杆高度的示例

@media only screen and (min-width: 800px){
.masthead.shrink {
    height: 50px;    
}
}

因此，您可以检查css样式，查找任何@媒体查询并进行相应修改。

小码农CODE

识别屏幕大小更改

相关推荐