Question

我正在尝试学习HTML / CSS并在导航栏上工作，但是，我遇到了缩放问题。这是全屏网站。

这是网站最小化了一下。

然后这是网站最小化。

正如您所知，当我将网站扩展到不同的比例时，比例会变得混乱，事情开始重叠。我一直试图让孩子们保持绝对，同时保持容器相对。我也使用em进行测量而不使用像素。在缩放时，我可以做些什么来保持比例一致？

这是js小提琴 https://jsfiddle.net/2w1r136j/2/

HTML

<div class="container">
  <header>
    <nav>
      <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt="logo">
      <div class="leftNavContainer">
        <a href="#">Home</a>
        <a href="#">Story</a>
      </div>
      <div class="rightNavContainer">
        <a href="#">Characters</a>
        <a href="#">Create</a>
      </div>
    </nav>
  </header>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #222;
  font-size: 1em;
}

.container {
  width: 100%;
  height: 100%;
  position: absolute;
}

header {
  background: white;
  height: 3.5em;
}

.logo {
  height: 4.5em;
  width: 4.5em;
  position: absolute;
  left: 50%;
  margin-left: -50px !important;  /* 50% of your logo width */
  display: block;
  margin-top: 0;
}

.leftNavContainer {
  position: absolute;
  float: left;
}

.leftNavContainer a {
  position: relative;
  display: inline;
  margin-right: 2em;
  margin-left: 2em;
}

.rightNavContainer {
  float: right;
}

.rightNavContainer a {
  position: relative;
  display: inline;
  margin-right: 2em;
  margin-left: 2em;
}

Answer 1

您可以使用媒体查询来更改断点处的大小例如：

@media only screen and (max-width: 600px) {
    body {
        font-size: .7em;

    }
}

https://jsfiddle.net/2w1r136j/7/

但是，您可以考虑使用媒体查询来整合适用于移动设备的响应式设计。一个常见的习惯用法是将菜单项折叠成全宽度元素，并提高字体大小。

类似于：https://jsfiddle.net/2w1r136j/40/

Answer 2

Well Media查询可能有效，但更好的实现方法是使用Flexbox或更好的CSS Grid。我用Flexbox实现更新了小提琴。

https://jsfiddle.net/khpv2azq/3/

HTML

<head>
  <title>
    Westworld
  </title>
  <link rel="stylesheet" href="css/style.css">
</head>
<div class="container">
  <header>
    <nav>
      <div class="leftNavContainer">
        <a href="#">Home</a>
        <a href="#">Story</a>
      </div>
       <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt="logo">
      <div class="rightNavContainer">
        <a href="#">Characters</a>
        <a href="#">Create</a>
      </div>
    </nav>
  </header>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #222;
  font-size: 1em;
}

nav{
  display: flex;
  justify-content: space-between;
}

.container {
  width: 100%;
  height: 100%;
}

header {
  background: white;
  height: 3.5em;
}

.logo {
  height: 4.5em;
  width: 4.5em;
  position: absolute;
  left: 50%;
  margin-left: -50px !important;
  /* 50% of your logo width */
  display: block;
  margin-top: 0;
}

.leftNavContainer {

}

.leftNavContainer a {
  position: relative;
  display: inline;
  margin: 4px;
}

.rightNavContainer {

}

.rightNavContainer a {
  position: relative;
  display: inline;
  margin: 4px;
}

Flex框的MDN资源 -

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

希望这有帮助！

缩放和保持比例

2 个答案: