Question

我已经制作了这个屏幕分辨率为1366 x 768的页面。这里的仪表板看起来很好但是当我在1024 x 768上检查它时它变得很乱。请帮助我！这是代码。

<style>
  #heading{ 
    text-align:right;
    font-size: 20px;
    float:right;
    margin:50px 20px;
  }
</style>

<h1 align="center" style="position:absolute;top:30px; left:600px;">
  KARMA <br>(3-SEATER)
</h1>
<div id="heading">
  <a href="home.php" style="text-decoration:none;">Home</a>
  &nbsp;&nbsp;&nbsp;
  <a href="pswd.php" style="text-decoration:none;">Change Password</a>
  &nbsp;&nbsp;&nbsp;
  <a href="logout.php" style="text-decoration:none;">Logout</a>
  &nbsp;&nbsp;&nbsp;
  <a href="UserManual.pdf" target="_blank" style="text-decoration:none;">Help</a>
</div>

Answer 1

如果您使用的是html5

你可以添加

<meta content="width=device-width, initial-scale=1.0">

到<head>元素这将调整身体内容到任何设备的宽度，无论分辨率如何......

Answer 2

您正在使用响应式网站。响应式网站是一个根据显示的屏幕大小更改布局的网站。在使您的网站响应时，有几种不同的选择。

响应式框架

响应式框架将帮助您创建自适应网站，bootstrap和foundation是响应式网页设计中广泛使用的两个关键响应框架。如果您不熟悉 bootstrap ，shoelace等网站可以帮助您在不同设备上创建网站布局的直观表示

媒体查询

媒体查询用于根据屏幕大小显示不同的样式规则。 请注意，它们不会更改核心HTML，只会改变样式，但这可用于显示/隐藏元素。 小型移动屏幕的媒体查询示例如下：

@media (max-width: 700px) { ... }

当设备的宽度介于 0 - 700 px

之间时，您放置的任何样式规则将仅应用于文档

如何根据不同的屏幕分辨率进行调整

2 个答案: