如何让我的网站适应每个显示器？

Question

我有一台1080p显示器，一切正常。但在其他1366x768分辨率的显示器上，网站看起来与我的显示器看起来不一样

如何让我的网站适应每个显示器？

在文章中，我输入了边距和高度错误以禁用它们，但如果有任何需要它们，我知道该去哪里。

这是CSS代码：

article{
    margsin:20px;
    hseight:100%;
    color:navy;
    }
footer{
    background-color:#CCCCCC;
    font-size:12px;
    height:auto;
    width:auto;
    min-width:1920px;
    min-height:50px;
    }
div.all{
    width:auto;
    height:auto;
    min-width:1920px;
    min-height:1080px;
    border:1px solid gray;
    background:linear-gradient(white,lightblue);
    font-size:20px;

Answer 1

不太确定看错了你的意思。但对我来说，对于更大的分辨率，例如1366px或更多，我发现内容往往分散太多。

我想添加一个包装类。而不是min-width，我通常添加一个max-width来约束内容。

<div class="wrap"></div> 
.wrap {max-width: 1200px;}

Answer 2

如果您觉得需要让网站在更大的分辨率上看起来更好，我建议您阅读媒体查询和相关单元，而不是使用像素。媒体查询将允许您设置断点（在您的情况下是屏幕大小），您可以在其中应用新样式。 You can read about them here

相对单位，例如％，em，rem或vw和vh将帮助您的样式根据视口的宽度进行缩放。 You can read up on them here

Answer 3

正如ohers所提到的那样，media queries将是一个很好的起点。此外，从像素转移到vh，vw，%等更多:-)

如何使我的HTML页面适应每个分辨率

如何让我的网站适应每个显示器？

3 个答案: