如何根据不同的屏幕宽度缩放我的网站

Question

我想根据所用设备的宽度将网站的比例更改为 0.7 或类似比例。

到目前为止我能找到的唯一有用信息是以下 <meta> 标签：

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

我想知道是否可以编写类似下面的代码来仅在设备宽度与特定宽度或宽度范围匹配时应用特定比例的网站：

@media screen and (min-device-width : 320px) and (max-device-width : 480px) { 
  .body {
    initial-scale: 0.7;
  }
 }

还是我在胡说八道？抱歉，我是 CSS 和 HTML 的新手，我只是在寻找一种快速解决方法，将笔记本电脑屏幕上的初始比例从 1.0 降低到 0.7。

非常欢迎您的回答。非常感谢！

最佳，

帕斯卡

Answer 1

只需在媒体查询中应用一些额外的 css 来覆盖默认值 css（这是使用媒体查询的正确方法）：

.some-class {
     font-size: 16px;
     padding: 10px;
}

@media (max-width: 480px) {
    .some-class {
        font-size: 13px;
        padding: 7px;
    }
}

Answer 2

您也可以将“!important”添加到您的代码块中，如下所示，以确保它具有所需的值

.some-class {
     font-size: 16px;
     padding: 10px;
}

@media (max-width: 480px) {
    .some-class {
        font-size: 13px!important;
        padding: 7px!important;
    }
}

Answer 3

每当我编写 html 代码时，我都会使用以下行：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

现在让我们来理解这意味着什么：

初始比例：控制首次加载页面时的缩放级别。这会采用设备屏幕上的原始像素化。

最大比例：定义初始比例后用户可以放大多少。

最小比例：定义初始比例后用户可以缩小多少。

User Scalable = 0 表示用户无法放大或缩小。

通过将以上行写为元标记，我们将所有内容保留为：未设置缩放，用户无法缩放。

现在我们也可以将比例设置为 0.7，如果需要，还可以相应地设置其他 3 个值。

但是标准的写法就是上面说的

在断点之后（在移动设备的情况下）我们希望元素在不更改代码的情况下更改其方向以及它们在屏幕上的排列方式（响应式）时，媒体查询就会出现structure/design.

Answer 4

你应该可以做类似

@-ms-viewport{
  width: device-width;
  initial-scale: 1;
  maximum-scale: 1; 
  user-scalable: 0;
}

如何根据不同的屏幕宽度缩放我的网站

How to Scale My Website Based on Different Screen Width

html

css

viewport

media-queries