响应式网页设计，html 宽度答案

【问题标题】：Responsive web design, html width响应式网页设计，html 宽度
【发布时间】：2017-05-03 15:34:31
【问题描述】：

如果您访问我的网站here，我正在尝试使我的网站具有响应性并转到开发工具并切换设备工具栏并在响应下，如果您将窗口调整为 900px 宽度以下，您会看到 html 元素（通过整个页面）正在缩小到小于实际宽度的大小，尽管我有我的宽度设置为 100%，有什么办法解决这个问题吗？

如果您想查看代码，请查看以下代码：here

    html{
      width: 100%;
      }


    body{
      width: 100%;
      }

【问题讨论】：

您能否在问题中发布您的代码，而不是要求人们点击链接查看它
我应该发布所有代码吗？我似乎无法在代码中准确找到问题所在或如何解决它
你的视口声明有错误，你应该把它改成这样 -
移除宽度：900px； .name

标签： html css responsive-design media-queries

【解决方案1】：

以下规则会起作用：

.navgiationbar ul  {
  width: 100vw;
}

但我确信有更清洁的解决方案。

【讨论】：

【解决方案2】：

我查看了您的网站，发现更多部分使用像素宽度，例如标题 h1 标题。所以每个地方都使用百分比而不是像素的宽度。

您可以编写这样的标头代码并删除此类 css ".name" 并使用我的 css：

.header-title {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.header-text {
	display: table;
	width: 100%;
	height: 100%;
}
.v-align {
	display: table-cell;
	vertical-align: middle;
}
.name {
	font-family: "Cookie";
	font-size: 100px;
	color: white;
	margin: 0;
	padding: 0;
}

<div class="header-title">
  <div class="header-text">
    <div class="v-align">
      <h1 class="name">Robert A. Makar</h1>
    </div>
  </div>
</div>

【讨论】：