我正在做一个程序，每次用户进入页面时，“你好”的消息会出现 2 秒。
我已将消息设置为出现在‘left: 75%’和‘top:0’的位置
问题是，当我在 25 英寸的屏幕上测试样式时，我固定了那个位置，但是当我转到 14 英寸的笔记本电脑时，消息“隐藏”了，我只能看到它的一部分。
有什么方法可以使发布消息的位置适用于屏幕的所有英寸？ 我该如何解决这个问题？有人可以告诉我这是否有解决方案吗？谢谢。
这是我的代码片段:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script>
function customAlert(msg,duration)
{
var styler = document.getElementById("welcomeMessage")
styler.setAttribute("style","" );
styler.innerHTML = "<h1>"+msg+"</h1>";
setTimeout(function()
{
styler.parentNode.removeChild(styler);
},duration);
document.body.appendChild(styler);
}
</script>
<style>
#welcomeMessage{
font-family: Arial, Helvetica, sans-serif;
color:#4d4d4d;
background: rgba(0, 0, 255,0.6);
position:fixed;
padding:10px;
text-align:center;
left: 75%;
top:0;
margin-left:-5px;
width:500px;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
}
#div2 { /* Style the header */
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/*Navigation bar*/
ul {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;/*f1f1f1/*#333*/
}
li {
float: left;
}
li a {
display: block;
color: #333333; /*333333*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: white; /*#f9f9f9*/ /*Background colour when mouse on top*/
}
li a.active {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div id="welcomeMessage"></div>
<script> customAlert("Hello!", 2000)</script>
<div id="div2">
<h1>Project</h1>
</div>
<div class="tab" id="navbar">
<ul>
<li><a class="active">Tab 1</a></li>
<li><a target="_blank">Tab 2</a></li>
<li><a target="_blank">Tab 3</a></li>
</ul>
</div>
</body>
</html>最佳答案
我们称之为“响应式”。你可以用谷歌搜索它并找到很多关于它的例子。
如果你想要一个快速教程:
在
head中添加这个标签
<meta name="viewport" content="width=device-width, initial-scale=1">并且您可以使用 media 在 css 中定义样式
@media only screen and (min-width: 768px) {
#welcomeMessage {
left: 50%;
}
}
此代码仅在窗口大小大于 768px 时有效
关于css - 由于屏幕英寸改变页面样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55801854/