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

Question

我有webpage由我制作。此时，在不同的屏幕上，它看起来非常不同。

在我的电脑上＆＃34;销售＆＃34;文字看起来像这样（这是我想要的）：

第一张图片：

而在另一台计算机（屏幕大小不同）上，它以这种方式看待（这不是我想要的）：

第二张图片：

在这个第二张图片中，由于某些原因（在不同的屏幕上）销售文本很远，​​这不是我想要的。我希望它在手形图像的顶部，如第一张图片所示。

我用于销售文本的CSS代码是：

.sales .text1 {
    padding-left: 450px;
    color: #0275d8;
    font-size: 1.3rem;
    font-weight: bold;
    font-style: italic;
    padding-bottom: 20px;
}

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

Answer 1

您应该使用百分比等相对测量值来避免这种情况，另外您可以使用媒体查询根据屏幕宽度等许多因素使用不同的行为

Answer 2

很棒的问题，您希望让您的网页快速响应。 查看该链接，我相信它正是您正在寻找的。 https://www.w3schools.com/css/css_rwd_intro.asp

Answer 3

在您的CSS中，我已将padding-left: 450px更改为0值并添加了text-align: right，以便See More链接不会被截止。

.sales .text1 {
    padding-left: 0;
    color: #0275d8;
    font-size: 1.3rem;
    font-weight: bold;
    font-style: italic;
    padding-bottom: 20px;
    text-align: right;
}