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

2023年7月21日 266次阅读

我想将我的网站规模改为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.

您的回答将受到高度欢迎.非常感谢提前！

最好,

帕斯卡尔

最佳答案 每当我写一个HTML代码时,我都会使用下面的代码：

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

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

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

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

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

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

通过将上面的行写为元标记,我们将所有内容保留为：无缩放集,用户无法缩放.

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

但标准的写入方式如上所述.

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

点赞