猜猜你已经睡了一会儿？

Question

我已经在另一篇文章Fixing Nav Bar to top of page中发布了我的导航栏的代码，现在我想创建一个移动版本，但我对于为移动设备创建的整个领域都是新手。当我学习网页设计时，并非如此。因此，基于反馈和调整css代码，这是我在桌面版上工作但我不确定如何检查移动版本，因为它还没有发布...

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;}


/*---------- BODY --------------------------------*/

body {
    text-align: center;
    background: #e0e0e0;
    padding-bottom: 200px;
}

a {
    text-decoration: none;
}

/*---------- Wrapper --------------------*/

nav {
    font: 13px Verdana, 'Lucida Grande';
    font-weight: bold;
    position:fixed;top:0;left:0;
    height: auto; 
    width: 100%;
    min-width: 360px;
    word-wrap: break-word
    background: #222;
}

ul {
    text-align: right;
}

ul li {
    cursor: pointer;
    -webkit-transition: padding .05s linear;
    -moz-transition: padding .05s linear;
    -ms-transition: padding .05s linear;
    -o-transition: padding .05s linear;
    transition: padding .05s linear;
}
ul li.drop {
    position: relative;
}
ul > li {
    display: inline-block;
}
ul li a {
    line-height:80px;
    padding: 0 10px;
    height: 80px;
    color: #777;
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}
ul li a:hover {
    color: #eee;
}

.dropOut .triangle {
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
    top: -8px;
    left: 50%;
    margin-left: -8px;
}
.dropdownContain {
    width: 160px;
    position: absolute;
    z-index: 10;
    left: 50%;
    margin-left: -80px; /* half of width */
    top: -400px;
}
.dropOut {
    width: 160px;
    background: white;
    float: left;
    position: relative;
    margin-top: 0px;
    opacity: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    box-shadow: 0 1px 6px rgba(0,0,0,.15);
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}

.dropOut ul {
    float: left;
    padding: 10px 0;
}
.dropOut ul li {
    text-align: left;
    float: left;
    width: 125px;
    padding: 12px 0 10px 15px;
    margin: 0px 10px;
    color: #777;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: background .1s ease-out;
    -moz-transition: background .1s ease-out;
    -ms-transition: background .1s ease-out;
    -o-transition: background .1s ease-out;
    transition: background .1s ease-out;
}

.dropOut ul li:hover {
    background: #f6f6f6;
}

ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }

让我知道如何检查移动版本的进度和/或此代码是否使其适合移动设备。此外，是否可以改变dropdown，dropOut子菜单的外观（只是想知道）？

Answer 1

您正在寻找我认为的响应式设计，因此您可以在css中使用媒体查询

#nav-bar
    {
    background-color:red;
    }

@media (max-width: 600px) 
{
    #nav-bar
    {
    background-color:blue;
    }

}
@media (max-width: 480px) 
{
    #nav-bar
    {
    background-color:green;
    }

}
/* ...etc*/

测试您的响应式设计：

在Firefox中按按F12，然后点击图标＆＃34;响应式设计模式＆＃34;

在Chrome中按F12，然后点击图标＆＃34;切换手机＆＃34;

您可以在此处找到更具响应性的导航菜单：

http://navnav.co/

希望有所帮助

Answer 2

猜猜你已经睡了一会儿？

无论如何，提到的Mozilla Ducmentation很有用：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

但这可能令人困惑。当进入响应式Web设计领域时，您必须了解auto是您的朋友。

nav
{
height: auto; 
width: auto;
min-width: 360px;
word-wrap: break-wrod;
overflow: auto;
}

无论如何，祝你好运！

如何创建Nav Bar的移动版本

2 个答案:

猜猜你已经睡了一会儿？