使用 Wordpress 进行响应式设计：设置主导航

Question

您可以实时查看我的网站here。

我在设计响应式网站方面还很陌生，我正在努力提高我的编码技能。我正在努力确保我的主导航和网站标题在所有屏幕尺寸上看起来都是一致的。但是，我在正确设置 CSS 时遇到了问题。我通常很快就能找到解决方案，但由于某种原因，我无法获得想要的结果。

计划是使网站的标题和导航相互对齐，尽管有很多方法可以做到这一点，但我似乎无法找出最佳做法。

它目前看起来很乱，并且导航在某些边缘被切断。我尝试在响应式样式表规则中添加更多和删除填充。

当前截图

我当前的导航是这样的：

当前标记

/*** CURRENT CSS ***/
.title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    padding:10px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#00e9d9;
    margin-right:232px;
}
#navigation {
    background-color:#18161d;
    padding-top:4px;
    padding-bottom:4px;
    font-size: 13px;
    letter-spacing:2px;
    text-align:center;
    font-family: 'Open Sans', sans-serif;
    font-weight:700;
    font-size:13px;
    z-index:1;
    overflow:hidden; 
    color:#00e9d9;
    margin-bottom:25px;
}

<!-- CURRENT HTML -->

<div id="navigation">
    <span class="title">KATERINA GRAHAM WORLD</span>
    <a href="#"><i class="fa fa-home"></i> Homepage</a> 
    <a href="#"><i class="fa fa-info-circle"></i> Information</a> 
    <a href="#"><i class="fa fa-camera"></i> Photo Archive</a> 
    <a href="#"><i class="fa fa-desktop"></i> Website</a> 
    <a href="#"><i class="fa fa-align-left"></i> Online</a> 
</div>

Answer 1

解决了这个问题。我认为没有必要为移动屏幕尺寸创建样式，因为我认为添加 max-device-width 会告诉浏览器我想要什么'因为我给了它一个最大值。我应该更具体一点，并确保代码确实具有较小屏幕尺寸的样式我添加了这个：

/*------------------------------------------
     450px Media
------------------------------------------*/
@media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {

_#header {
background-color:#fff!important;
height:248px!important;
width:auto!important;
overflow:hidden!important;
}

.title {
padding:10px !important;
width:100% !important;
display:block;
}

#navigation a:link {
display: block;
margin: 3px;
padding: 10px !important;
}

#navigation a:active {
display: block;
margin: 3px;
padding: 10px !important;
}

#navigation a:visited {
display: block;
margin: 3px;
padding: 10px !important;
}

#navigation a:hover {
display: block;
margin: 3px;
padding: 10px !important;
}
}

Answer 2

不要完全自定义您的容器，而是自定义链接。

例如

a {
padding:7px;
margin:0 8px;
color:#00e9d9;
background:#00e9d9
}

Answer 3

我认为你应该参考this answer上一个问题Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques

我真的建议您阅读一些关于Design Fundamentals 的内容，并阅读有关响应式网页设计的内容。这里有几篇文章可以帮助您入门：HTML Responsive Web (W3) 和 Responsive Web Design: What Is It and How To Use it (Smashing Magazine)

设计一个好的、用户友好的响应式网站需要时间和计划。就我个人而言，我喜欢一次设计每个元素（例如我将设计通用桌面标题元素，然后针对平板电脑和移动设备重新设计或调整它。然后我会为页脚和网站内容。）