我对编码网站比较陌生，我有一个关于定位 Material 和窗口收缩的问题，我希望有人能回答!
我想在中心周围放置一张图片、一条消息和一个密码输入(它在我的屏幕上有效，但对于下面的代码片段[你可能需要滚动才能看到任何东西]，密码行下方没有空格，所以我显然做错了什么..它应该是屏幕的死点)。
但是，我认为我没有以最有效的方式定位我的元素。我还试图考虑用户是否缩小了他们的窗口，滚动条应该出现并且空白区域应该消失(可能像 Twitter 的登录页面:https://twitter.com/login)。 对于我的代码，当我缩小窗口时，仍然有空白空间，我认为这是糟糕的 UI？
总而言之，如果有人可以就如何有效地定位文字和图像以及如何有效地使用 css 来考虑窗口收缩提供任何提示，我将不胜感激 :) 欢迎任何帮助，再次感谢您!
.pretty {
text-align: center;
color: #00008b;
font-family: Lucida Console;
position: absolute;
top: 115%;
left: 39%;
}
.pwd {
text-align: center;
position: absolute;
top: 155%;
left: 38.5%;
}
.chatbubble {
height: 14%;
width: 6%;
position: absolute;
top: 102%;
left: 48.5%;
}
body {
background-color: #fff0f5;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.contain {
position: relative;
height: 200px;
}
html {
height: 100%;
}<!DOCTYPE html>
<html>
<div id="wrapper">
<head>
<title> Log In </title>
<link href="loginstyle.css" type="text/css" rel="stylesheet">
<script language="JavaScript">
function showPass(form, e) {
e.preventDefault();
var pass = form.pwd.value;
var pass1 = "webdesign"
if (pass == pass1) {
window.location.href = 'https://www.google.com'
} else {
window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
}
}
</script>
</head>
<body>
<div class="contain">
<img class="chatbubble" src="chatbubble.png" alt="Chat Bubble" />
<p class="pretty center">Welcome to a <br/> digital photobook. <br/> Please enter the password to continue: <br/> </p>
<form class="pwd center" onsubmit="showPass(this, event)">
Password: <input type="password" name="pwd" />
<input type="submit" value="Log In" />
</form>
</div>
</body>
</div>
</html>最佳答案
您在 body 和头部周围使用包装器，这是无效的。包装器必须在您的 body 标签内:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Content, including wrappers, go here -->
</body>
</html>
不要在响应式网页设计中使用绝对定位(极少数异常(exception)……)!水平和垂直居中内容有多种可能性 - 有 answers for that on SO .一个现代的是使用flexbox .
为您的包装器使用max-width，而不是固定宽度!在小型设备上，固定宽度会导致滚动区域。
RWD 的有效方法是从移动 View 开始，只有最少的 css 样式。大多数元素都会流动并且很自然地响应。添加一些样式以使图像具有响应性，并且适合小型设备。
添加包装器以提供大屏幕的最大宽度。使用 media queries 开始实现其他样式用于在具有大视口(viewport)的设备上排列和修改元素，更改部分的字体大小并重新定位事物。谷歌 mobile first strategy .
html {
height: 100%;
}
body {
min-height: 100%;
background-color: #fff;
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
padding: 1rem;
max-width: 960px;
background-color: #fff0f5;
}
/* login section */
.login-section {
min-height: 100vh;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
text-align: center;
}
/* typo */
.pretty {
color: #00008b;
font-family: Lucida Console;
}<!DOCTYPE html>
<html>
<head>
<title> Log In </title>
<link href="loginstyle.css" type="text/css" rel="stylesheet">
<script language="JavaScript">
function showPass(form, e) {
e.preventDefault();
var pass = form.pwd.value;
var pass1 = "webdesign"
if (pass == pass1) {
window.location.href = 'https://www.google.com'
} else {
window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
}
}
</script>
</head>
<body>
<div id="wrapper">
<main>
<section class="login-section">
<img class="chatbubble" src="https://via.placeholder.com/150" alt="Chat Bubble" />
<p class="pretty">Welcome to a digital photobook.<br>Please enter the password to continue:</p>
<form class="pwd" onsubmit="showPass(this, event)">
Password: <input type="password" name="pwd" />
<input type="submit" value="Log In" />
</form>
</section>
</main>
</div>
</body>
</html>关于javascript - (HTML/CSS) 以有效的方式定位文字/图片，以便考虑窗口收缩，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53943349/