由于屏幕英寸而改变页面样式 [英] Alter page style because of screen inches
问题描述
我正在做一个程序，每次用户进入页面时，都会出现 Hello消息2秒钟。
I'm doing a program where every time a user enters the page, a message of 'Hello' appears for 2 seconds.
我已将消息设置为出现在'left：75％'和'top：0'的位置
I have set the message to appear in a position of ‘left: 75%’ and ‘top:0’
问题是当我在25'上测试样式时我固定了该位置屏幕上，但当我去14岁的笔记本电脑时，该消息已隐藏，我只能看到其中的一部分。
The problem is that I fixed that position when I was testing the style on a 25 '' screen but when I went to my laptop that is 14 '' the message has 'hidden' and I can only see part of it.
发布消息的位置在屏幕的所有英寸上都有效吗？
我该如何解决？有人可以告诉我是否有解决方案？谢谢。
Is there any way that the position of the posted message works for all the inches of the screens? How could I solve this? Can someone tell me if this has a solution? Thank you.
这是我的代码段：
<!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>
推荐答案
我们说的是响应式。您可以在Google上搜索并找到许多与此有关的示例。
如果您需要快速教程：
We say that 'responsive'. You can google it and find many examples about that.
If you want a quick tutorial:
-
将其添加到
head标签
< meta name = viewport content = width = device-width，initial -scale = 1>
您可以在带有媒体的CSS中定义样式
And you can define your styles in css with media
@media only screen and (min-width: 768px) {
#welcomeMessage {
left: 50%;
}
}
此代码仅在窗口大小大于768px
This code will only work if window size is larger then 768px
这篇关于由于屏幕英寸而改变页面样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
