Question

我在这里创建了一个弹出菜单：https://jsfiddle.net/8f3vLh0a/1/

我试图调整一些东西来制定一个完美的东西，但我想知道如何才能使它具有响应性。因此，当您调整大小时，它在较小的设备上看起来会很好。

这是我的css：

.icon-box.home h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #E74C3C; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
        border-left: 3px solid #a7382d;

}

.icon-box.home a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}

.icon-box.aboutme h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #1dd0ad; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #0d866e;
}

.icon-box.aboutme a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}


.icon-box.portfolio h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #3498db; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #2177b1;
}

.icon-box.portfolio a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}


.icon-box.blog h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #f1c40f; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #b8960e;
}

.icon-box.blog a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}

.icon-box.contact h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #f39c12; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #bc780d;
}

.icon-box.contact a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}





span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat;  width: 32px; height: 32px; margin: 43px 40px;}
span.icon.home { background-position: 0px 0px;}
span.icon.aboutme { background-position: -36px 0px;}
span.icon.portfolio { background-position: -72px 0px;}
span.icon.blog { background-position: -109px 0px;}
span.icon.contact { background-position: -145px 0px;}

.icon-box a {
    padding: 120px;
}

任何IDEA如何在所有浏览器上做出回应？

JSFIDDLE请问？

注意：没有BOOTSTRAP请

Answer 1

使用@Media次查询

Media Queries CSS

或更好地使用Bootstrap

Bootstrap Grid Layout用于回应

Answer 2

您可以查看this link

@media规则用于为不同的媒体类型/设备定义不同的样式规则。

在CSS2中，这被称为媒体类型，而在CSS3中，它被称为媒体查询。

媒体查询会查看设备的功能，并可用于检查许多内容，例如：

视口的宽度和高度   设备的宽度和高度   方向（横向或纵向模式下的平板电脑/手机？）   解析度   还有更多

Answer 3

如果您从头开始构建网站，您需要的是正确的CSS工具Media Queries，这些工具本身并不复杂。

以下是引用iPhone 6的媒体查询示例，虽然没有必要为访问您网站的每个设备编写查询，但这可能会让您了解语法的样子 - 您可以在大括号内添加CSS规则。

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

如果你想使用一个框架，有很多选择：Bootstrap，Foundation，Toast Grid，Skeleton CSS等.Bootstrap是最受欢迎的，但是Foundation也非常了解并广泛使用。

如何让我的菜单响应？

3 个答案: