html - 如何防止页面元素在不同的屏幕分辨率上移动...？

Question

我是网页设计/开发的新手，我目前正在大学学习几门网页开发和设计课程。现在我一直在做我的第四个项目，但我遇到了一些麻烦，有点感觉我对这个项目失去了理智，哈哈。

我正在使用 Dreamweaver 创建网页，当我在笔记本电脑 (1920 x 1080) 上的 Chrome 浏览器上预览页面时，一切看起来都很好。但是当我在不同的屏幕分辨率上预览页面时，所有页面元素都被弄乱了，我的标题在整个屏幕上移动。

如何使页面元素在所有屏幕分辨率上保持相同的位置？正如我所说，我非常缺乏经验，所以我非常感谢任何帮助。

这里是五个网页之一的代码和 CSS 虽然我无法取出网站其余部分的 CSS，所以我为它太长而道歉。另外，如果我什至没有正确发布此内容，我深表歉意，这是我第一次在这里提问。

h2.version-four {
    right: 840px;
    position: absolute;
    top: 254px;
    font-size: 1.9em;
}

标签： htmlcsspositionelementdreamweaver

Answer 1

检查这个“https://codepen.io/vanco-pham/pen/ZEBPbbP?editors=1100”
我不建议你只是复制它，试着理解它为什么有效，并学习网格，弹性，因为它会帮助你从长远来看。