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

每当我写一个HTML代码时，我都会使用以下代码：

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

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

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

最大比例：定义用户可以放大的初始比例之后的数量。

最小比例：定义用户可以缩小的初始比例之后的数量。

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

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

现在我们可以将比例设置为0.7，并相应地设置其他3个值。

但标准的写作方式如上所述。

媒体查询会在突破点（在移动设备的情况下）后出现，我们希望元素在不改变代码结构/设计的情况下改变其方向以及如何在屏幕上排列（响应）。

Answer 2

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

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

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

Answer 3

您应该能够执行

之类的操作

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

Answer 4

你也可以添加＆＃34;！important＆＃34;到你的代码块，如下所示，以确保它具有所需的值

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

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

如何根据不同的屏幕宽度扩展我的网站

4 个答案: