Question

我正在设计一个响应式网站，现在我有点问题。基本上徽标设置在导航的中间，但是当我尝试在移动设备中查看它或将我的浏览器设置为移动设备时，它看起来像这样。

http://i255.photobucket.com/albums/hh140/testament1234/responsive_zps3a22ab61.jpg

这就是全屏幕的样子。

http://s255.photobucket.com/user/testament1234/media/desktop_zps4c60a09c.jpg.html

在移动设备中查看时，如何在导航顶部设置徽标。

这是我的标记代码或HTML。

<div class="container">
 <div id="nav-container">
     <div class="six columns navigation">
     <ul>
         <li><a href="#" title="Home">Home</a></li>
         <li><a href="#" title="Home">Project</a></li>
         <li><a href="#" title="Home">Blog</a></li>

     </ul>
     </div>
     <div class="four columns">
         <h1>Logo</h1>
     </div>
     <div class="six columns navigation">
         <ul>
             <li><a href="#" title="Gallery">Gallery</a></li>
             <li><a href="#" title="Gallery">About</a></li>
             <li><a href="#" title="Gallery">Contact</a></li>
         </ul>
     </div>
 </div>
</div>

这是我的CSS代码

#nav-container{margin-top:20px;}
.navigation{text-align:center; background-color:#D1673A;}
.navigation li{display:inline; }
.navigation a{text-decoration:none; color:black; display:inline-block; padding:20px 20px 20px}
.navigation a:hover{color:white; background-color:black}

我在构建响应式网站时使用骨架框架。关于我的问题，我是否在媒体查询中设置了一些样式或更改了我的标记？

Answer 1

编辑

查看此更新后的答案是否适合您：http://jsfiddle.net/panchroma/HBhNt/

HTML与您发布的内容完全相同，但我在徽标div中添加了徽标类。

除了您发布的内容之外，

CSS ：

.navigation{
position:relative;
}

.logo{
height:60px;
}

@media only screen and (max-width: 767px) {
.logo{
 position:absolute;
    top:0;
    left:0;


}
.navigation{
   top:60px;
}  

.navigation ul li a{
    width:100%;
}
}

==============================

下面的原始答案

一种选择是在导航容器的头部添加第二个徽标，并将其仅显示在移动设备上，同时将现有徽标隐藏在移动设备上。

请参阅下文，了解如何在HTML和CSS中执行此操作。

您可能需要使用@media设置来获得所需的结果，例如，您可能需要在导航中间隐藏徽标，以用于横向智能手机甚至是平板电脑。

祝你好运！

HTML

 <div class="container">
 <div id="nav-container">
 <div class="four columns display-mobile">
     <h1>Logo</h1>
 </div>
 <div class="six columns navigation">
 <ul>
     <li><a href="#" title="Home">Home</a></li>
     <li><a href="#" title="Home">Project</a></li>
     <li><a href="#" title="Home">Blog</a></li>

 </ul>
 </div>
 <div class="four columns hide-mobile">
     <h1>Logo</h1>
 </div>
 <div class="six columns navigation">
     <ul>
         <li><a href="#" title="Gallery">Gallery</a></li>
         <li><a href="#" title="Gallery">About</a></li>
         <li><a href="#" title="Gallery">Contact</a></li>
     </ul>
 </div>
 </div>
</div>

CSS

/* set defaults for display-mobile and hide-mobile */  

.display-mobile{
display:none;
}  

.hide-mobile{  
display:inherit;
}  

/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */  
/* depending on the specifics of your site CSS, you may need to use !important with the following */  

@media only screen and (max-width: 479px) {
.display-mobile{
display: inherit; 
}
.hide-mobile{
display:none;
}
}

试图修复我的移动设备导航栏

1 个答案: