Css 因屏幕英寸而改变页面样式

我正在做一个程序，每次用户进入页面时，都会出现一条“Hello”消息，持续2秒钟

我已将邮件设置为显示在“左：75%”和“顶部：0”的位置

问题是，当我在25英寸的屏幕上测试样式时，我修正了这个位置，但当我在14英寸的笔记本电脑上查看时，消息被“隐藏”，我只能看到其中的一部分

是否有任何方式可以使张贴的信息的位置适用于所有英寸的屏幕？ 我怎样才能解决这个问题？有人能告诉我这是否有解决办法吗？多谢各位

以下是我的代码片段：

功能customAlert（消息，持续时间）
{
var styler=document.getElementById（“welcomeMessage”）
setAttribute（“样式”，“样式”）；
styler.innerHTML=“+msg+”；
setTimeout（函数（）
{
styler.parentNode.removeChild（styler）；
}，持续时间）；
document.body.appendChild（styler）；
}
#欢迎留言{
字体系列：Arial、Helvetica、无衬线字体；
颜色：#4d；
背景：rgba（0,0255,0.6）；
位置：固定；
填充：10px；
文本对齐：居中；
左：75%；
排名：0；
左边距：-5px；
宽度：500px；
}
* {
边际：0px；
填充：0px；
}
身体{
字体大小：120%；
}
#div2{/*设置标题的样式*/
背景色：#f1f1；
填充：20px；
文本对齐：居中；
}
/*导航栏*/
保险商实验室{
字体系列：Arial、Helvetica、无衬线字体；
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#f1f1；/*f1f1/*#333*/
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：#333333；/*333333*/
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李娜：停下来{
背景色：白色；/*#f9f9f9*/*鼠标位于顶部时的背景色*/
}
李安：很活跃{
背景色：白色；
颜色：黑色；
}
customAlert（“你好！”，2000年）
项目

表1
表2
表3

我们说“响应性”。你可以在谷歌上搜索它，并找到许多相关的例子。
如果需要快速教程，请执行以下操作：

• 将其添加到

  头部
  标签中
  
  

• 您可以使用媒体在css中定义样式
  

---

只有当窗口大小大于768px时，此代码才有效。如果将

#welcomeMessage

设置为

右：0

，而不是

左：75%

有效？@jla，则此代码适用于我网站上的一个文件，但由于消息也位于不同文件中的多个文件中，当我在不同英寸的屏幕上运行程序时，位置会改变。谢谢！我想这就是我需要的。现在我必须了解它是如何工作的。

@media only screen and (min-width: 768px) {
    #welcomeMessage {
        left: 50%;
    }
}