Question

大家好，我想知道为什么我不能让我的媒体查询缩小我的导航栏。我有以下css：

@media only screen and (min-device-width:1024px)
{
  div.large-7.push-5.columns.last{
  height: emCalc(1px);
}
}
@media only screen and (max-device-width: 745px){
  .top-bar .toggle-topbar.menu-icon a {
    color: $steel;
    height: 34px;
    line-height: 33px;
    padding: 0 25px 0 0;
    position: relative;
}
  .top-bar .toggle-topbar.menu-icon a:after {
    box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 5px;
    top: 0;
    width: 16px;
}
}
@media only screen and (max-device-width: 480px) {

一切都按照预期在移动设备上运行，但在台式机/笔记本电脑浏览器窗口中，当我将浏览器缩小到745px标记时，它不会像我想要的那样响应。我不知道为什么，也无法在这个问题上找到任何帮助。如果您希望在网站上看到该网站，请访问www.omegadesignla.com。提前感谢您提供的精彩输入和赞成。

Answer 1

媒体查询通常应使用min-width和max-width而不是min-device-width和max-device-width，后两者由设备修复，无论窗口大小如何。

Answer 2

将CSS规则更改为：

@media only screen and (min-width:1024px)
{
  div.large-7.push-5.columns.last{
  height: emCalc(1px);
}
}
@media only screen and (max-width: 745px){
  .top-bar .toggle-topbar.menu-icon a {
    color: $steel;
    height: 34px;
    line-height: 33px;
    padding: 0 25px 0 0;
    position: relative;
}
  .top-bar .toggle-topbar.menu-icon a:after {
    box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 5px;
    top: 0;
    width: 16px;
}
}
@media only screen and (max-width: 480px) {

在X浏览器宽度下折叠导航栏@media查询无法正常工作

2 个答案: