html - Width = 100% CSS 属性在移动设备上不起作用。似乎视口的宽度错误
问题描述
我最近推出了这个网站。在移动视图中,标题不会覆盖整个屏幕宽度,而是在右侧有一个边距。我找不到使它在台式机和移动设备上都可以工作的解决方案。
这是视口设置
<meta name="viewport" content="width=device-width, initial-scale=1">
网址是 camisite.now.sh
这是我的 CSS,该对象只是一个没有类的标题。我尝试更改为 100vw,但大致相同。我认为 viewport-width 可能设置了错误的宽度。
@font-face{
font-family: songenia;
src:url("songenia.otf")
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: cornsilk;
}
body {
font-family: songenia;
font-size: xx-large;
background-image: url(background.jpg);
line-height: 1.2;
}
.input{
line-height: 1.6;
margin-top: 30px;
}
.posts {
list-style: none;
}
.onepost {
padding: 10px;
background: rgba(215, 177, 88, 0.548);
margin: 30px 0;
}
header {
background: rgba(215, 177, 88, 0.548);
padding: 2rem;
min-width: 100%;
text-align: center;
}
h1, h4 {
text-align: center;
}
.error-message {
text-align: center;
}
.input {
margin-top: 30px;
font-size: large;
}
main {
margin: auto;
width: 500px;
overflow: auto;
padding: 3rem 2rem;
}
.post-form {
padding: 2rem;
background:rgba(215, 177, 88, 0.548);
}
.post-form label {
text-align: center;
display: block;
}
.post-form input[type='text'] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border-radius: 5px;
color: black;
border: 1px solid #ccc;
}
.btn {
display: block;
width: 100%;
padding: 10px 15px;
border: 0;
background:rgba(25, 17, 68, 0.644);
color: #fff;
border-radius: 5px;
margin: 5px 0;
}
.btn:hover {
background: rgba(215, 177, 88, 0.548);
}
解决方案
我现在看到你的问题了。这是因为你.post-form
的制作方式。在移动模式下,表单会延伸到视口之外。你有两个解决方案
1. 改变行为.post-form
2. 调整header
选项 1 的宽度,在 style.css:75 for main 中,规则是
main {
margin: auto;
width: 500px;
overflow: auto;
padding: 3rem 2rem;
}
500px 导致了你的问题,你可以摆脱它。如果您的手机宽度小于500px
,那么main
会“溢出”到您的视口之外,而您header
不这样做。它的宽度保持在视口宽度的 100%。
对于选项 2,您可以制定一个 CSS 规则,当屏幕小于 500px 时,宽度为 500px
@media only screen and (max-width: 500) {
header {
min-width: 500px;
}
}
推荐阅读
- mysql - LibreOffice Base 数据透视表以获得更好的报告,无需计算值
- android - 找不到路径“/content:/com.android.externalstorage.documents/document/6759-130B%3ANew%20Text%20Document.txt”的一部分
- python-3.x - python 3.8 flask apache 2.4 wsgi multiprocessing RuntimeError: fork not supported for subinterpreters
- c# - Quartz 作业不能使用 autofac 和带有服务的构造函数运行
- webpack - Workbox-webpack-plugin 对我来说不能离线工作
- python - 使用 BS4 构造最短的有效 css 选择器
- python - google colab pytorch 版本错误(课程 231n)
- java - Java sublime.build 在一个目录中工作,但在另一个目录中不工作
- javascript - Javascript:轮播活动点和左右按钮
- kubernetes - 禁止:用户,“代码”:使用 curl 访问 kube-apiserver 时出现 403 错误