由于屏幕英寸改变页面样式
Alter page style because of screen inches
我正在做一个程序,每次用户进入页面时,'Hello' 的消息会出现 2 秒。
我已将消息设置为出现在‘left: 75%’和‘top:0’的位置
问题是我在 25 英寸的屏幕上测试样式时固定了那个位置,但是当我转到 14 英寸的笔记本电脑时,消息有 'hidden',我只能看到一部分。
有什么方法可以使发布消息的位置适用于所有英寸的屏幕吗?
我该如何解决这个问题?有人可以告诉我这是否有解决方案吗?谢谢。
这是我的代码片段:
<!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>
我们说'responsive'。您可以 google 它并找到许多相关示例。
如果你想要一个快速教程:
在 head
标签内添加这个
<meta name="viewport" content="width=device-width, initial-scale=1">
并且您可以在 css 中使用 media
定义样式
@media only screen and (min-width: 768px) {
#welcomeMessage {
left: 50%;
}
}
此代码仅在 window 尺寸大于 768px
时有效
我正在做一个程序,每次用户进入页面时,'Hello' 的消息会出现 2 秒。
我已将消息设置为出现在‘left: 75%’和‘top:0’的位置
问题是我在 25 英寸的屏幕上测试样式时固定了那个位置,但是当我转到 14 英寸的笔记本电脑时,消息有 'hidden',我只能看到一部分。
有什么方法可以使发布消息的位置适用于所有英寸的屏幕吗? 我该如何解决这个问题?有人可以告诉我这是否有解决方案吗?谢谢。
这是我的代码片段:
<!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>
我们说'responsive'。您可以 google 它并找到许多相关示例。
如果你想要一个快速教程:
在
head
标签内添加这个
<meta name="viewport" content="width=device-width, initial-scale=1">
并且您可以在 css 中使用 media
定义样式
@media only screen and (min-width: 768px) {
#welcomeMessage {
left: 50%;
}
}
此代码仅在 window 尺寸大于 768px
时有效