0

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

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}

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

4

1 回答 1

1

编辑

看看这个更新的答案是否适合你：http: //jsfiddle.net/panchroma/HBhNt/

HTML 与您发布的内容完全相同，只是我将 logo 类添加到 logo 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;
}
}
于 2013-07-07T18:20:07.353 回答