Question

好吧，我不是CSS专家，而且大部分时间都在后端Web开发中工作，但是我在移动设备和桌面设备上“看起来正确”时遇到了一些困难。

到目前为止，我只是通过制作移动网站来避免这个问题。事实证明这是一个巨大的麻烦，因为在两个站点上管理和测试功能是必要的更多工作。随着越来越多的开发者设计网站以支持各种屏幕尺寸，移动网站也逐渐被淘汰。

我的标题有以下布局：

这是我理想的布局;我希望它看起来如何。虽然需要一些肮脏的CSS黑客来到这里。

现在主要的问题是如何调整移动设备，如下所示：

首先，这是我的标签中的HTML。

<div id="header">

<a href="index.html"><h1>FlareHub</h1></a>

<ul>
  <li><a href="index.html"><i class="fa fa-home"></i>News</a></li>
  <li><a href="vipinfo.html"><i class="fa fa-star"></i>VIP</a></li>
  <li><a href="games.html"><i class="fa fa-trophy"></i>Games</a></li>
  <li><a href="vote.html"><i class="fa fa-heart"></i>Vote</a></li>
</ul>
<div class="dropdown">
  <button class="dropbtn"><i class="fa fa-arrow-down"></i>Account</button>
  <div class="dropdown-content">
    <a href="loginwebsite.php"><i class="fa fa-key"></i>Login</a>
    <a href="signup.php"><i class="fa fa-pencil-square-o"></i>Signup</a>
    <a href="help.html"><i class="fa fa-life-ring"></i>Help & Support</a>
  </div>
</div>

</div>
</head>

现在让我们来看看CSS。这里的大多数黑客都是正确定位帐户菜单下拉列表。

/* Dropdown Button */
.dropbtn {
    background-color: transparent;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    outline:none;
    margin-top: -14.7px;
    font-family: "smooth";
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    margin-top: -23.5px;
    margin-left: 75%;

}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: transparent;
}
/*Header Text*/
#header h1 {
    font-family: "smooth";
    font-size: 45px;
    color: #FFF;
    margin-top: 10px;
    margin-left: 30px;
    height: 0;
}

/* Make unordered list horizontle */
#header ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    margin-top: -12.5px;
    margin-left: 270px;
    white-space: nowrap;
    overflow: none;
}

/* Make unordered list horizontle */
#header ul li {
    display: inline;
    white-space: nowrap;
    overflow: none;
}

/* Make boxed & colored */
#header ul li a{
    text-decoration: none;
    padding: .2% 3%;
    color: #FFF; /*Text color, when not hovered*/
}

/* Make change colors, when hovered on */
#header ul li a:hover{
    color: lightgray; /*Text color*/
}

/* Header box */
#header{
    height: 60px;
    background-color: #3385ff;
    margin-top: -9px;
    margin-left: -20px;
    padding: 10px;
    width: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*Remove line*/
#header a{
    text-decoration: none;
}

/* Header navigation font */
#header li{
    font-family: "smooth";
}

像margin-top: -14.7px;这样的一些黑客，是要使帐户元素与列表保持一致。我真的很讨厌硬编码这样的值，并且很想找到删除margin-top: -23.5px;，margin-left: 75%;等的替代方法。

如何修复我的CSS / HTML以使所有内容正确定位？

Answer 1

您需要使用media queries才能为情景屏幕尺寸设置正确的CSS。

示例：

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

只有在媒体查询满足屏幕大小时，

正文才会更改颜色。因此，你的定位也是一样的。阅读here。

Answer 2

您在css中使用媒体查询。 E.A.

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

通过这种方式，你几乎可以为每种尺寸或设备编写规则。

你可以在这里阅读：

Css media queries

Answer 3

如果它不重要，也许你可以隐藏它

如何在移动设备和桌面设备上正确定位标题？

3 个答案: