移动中只有1 Div不是100％

Question

所以我正在quick portfolio和移动设备上工作，＆＃34;给我发电子邮件＆＃34;不会像在this screenshot上看到的那样在整个屏幕上展开。

我已经使用数字，百分比，文本值来摆弄内容宽度，设备宽度等，并且没有任何方法可以使这个页面变得完美。我重写了代码更清洁，仍然无法找到我的错误。这只是我忽略的东西吗？

你可以查看我的源代码来获取我的代码，因为CSS应该在那里。

更新：我删除了导航填充并更改了所有设备宽度值，但现在导航栏没有完全覆盖。我非常困惑，因为#navigation和#mobilecontact应该基本上具有相同的宽度。我在iPhone上使用Safari。

Answer 1

你可以添加你正在测试的浏览器和版本，因为在我最新的chrome - 开发者工具中，Email me按钮对我来说很合适（占据整个宽度）。

可能是您的浏览器无法理解 100vw

如果您关注＆＃34;可点击的区域，请发送电子邮件给我＆＃34;锚文本。 您可以将锚点设为display:block，以便占用整行

Answer 2

我认为您正在使用mac safari浏览器，并且在Safari浏览器“vw”不受支持，所以现在您可以使用“px”或“％” 和按钮将展开。

Answer 3

所以我设法达到了要求的结果。 基本上，您在<div id="navigation">（padding-left: 350px）上添加的额外填充是问题的一部分。

此外，您错误地使用了device-width属性值。无法使用width=device-width;指定html元素的宽度。 Width属性不接受设备宽度作为可接受的值。 因此，请使用width=100%;或width=100vw; 无处不在替换它。有关使用viewport meta tag and device-width的响应式网页设计的文档，请参阅此处。

通过进行这些更改，我能够让按钮占据屏幕宽度的100％。

1. 从padding-left: 350px移除<div id="navigation">。
2. 对于<div id="title">的媒体查询中的<div id="about">和max-width: 500px，将宽度从width: device-width更改为100%或100vw。

这是输出。如果它成功了，请告诉我。

Answer 4

我已经检查过..你需要修复这个

1. 首先你应该删除＆＃34; width = 500＆＃34;来自您的meta，在下面的图片中突出显示。

2. 在CSS中添加以下内容以修复填充

   * { box-sizing:border-box;
}

3. 而不是width: device-width使用width: 100%并在#title中添加更多属性。见图像
4. 将#about, #experience, #skills的CSS更新为width:100%

这就是你们所有人都完成了。

这是最终结果



您需要做的就是修复font-size

Answer 5

当你想要一个响应式设计时;您不需要对块级元素使用特定的Width。

刚 来自remove的{​​{1}}数字width，然后是body's children

add

然后如果要为视口元素设置填充或边距;标准方法只是一个具有特定类句柄宽度的元素，如body,html { width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }