如何在不同的屏幕上使网页看起来相同？

Question

我有webpage由我制作。其中的内容很少，在不同的屏幕上看起来不同（例如：mac和windows）。

当我尝试在我的DELL笔记本电脑（Windows 10）上打开相同的网页时，在其他屏幕尺寸的计算机上看起来有些不同。

在不同屏幕尺寸的电脑上;盒子部分，“查看更多”文本和“销售”文本目前看起来像这样（这不是我想要的）：

“查看更多”文字

“销售”文字

方框部分：

同样的链接，当我试图在我的桌面上打开更大的屏幕时，它正在以这种方式看待（这是我想要的）：

方框部分：

“查看更多”文字：

“销售”文字：

我想知道，我需要在CSS中进行哪些更改，以便在不同的屏幕上看起来相同。

我用于框的CSS代码是：

.company-heads {
    margin-left: 300px;
    padding-top: 80px;
    font-style: italic;
    margin-right: 289px
}

.company-heads .rectangle {
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 30px;
    margin-right: 22px;
    width: 355px;
    height: 100px;
    border: 1px solid #000;
    background-color: white;
    padding: 10px 10px 10px 100px;
    position: relative;
}

.company-heads .rectangle .circle {
    background: #aaa;
    border-radius: 100%;
    height: 60px;
    width: 60px;
    position: absolute;
    top: 20px;
    left: 20px;
}

Answer 1

您可以通过在这种情况下为父容器.company-heads提供最大宽度来实现此目的！看起来，.company-heads { max-width: 1140px; }将完成这项工作。如果这不能解决您的问题，请告诉我！