如何让我的菜单响应?

时间:2016-06-08 12:23:12

标签: html css

我在这里创建了一个弹出菜单: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请

3 个答案:

答案 0 :(得分:1)

使用@Media次查询

Media Queries CSS

或更好地使用Bootstrap

Bootstrap Grid Layout用于回应

答案 1 :(得分:0)

您可以查看this link

  

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

     

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

     

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

     

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

答案 2 :(得分:0)

如果您从头开始构建网站,您需要的是正确的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也非常了解并广泛使用。