相关疑难解决方法(0)

在http://getbootstrap.com/css/上它说:

我们使用以下媒体查询在网格系统中创建关键断点.

超小型设备(电话,最高480px):无媒体查询,因为这是Bootstrap中的默认设置

小型设备(平板电脑,768像素及以上):@ media(最小宽度:@ screen-sm){...}

中型设备(台式机,992px及以上):@ media(最小宽度:@ screen-md){...}

大型设备(大型台式机,1200px及以上):@ media(最小宽度:@ screen-lg){...}

我们是否应该能够在我们的媒体查询中使用@ screen-sm,@ screen-md和@ screen-lg名称？因为它对我不起作用.在它工作之前,我必须使用像@media(min-width:768px){...}这样的像素测量.难道我做错了什么？

另外,对于超小型设备而言,480px的参考是错字吗？不应该说高达767px？

我为什么问这个问题？

我不想为真正的大屏幕创建这么多媒体查询。

如果屏幕尺寸大于 1920px，则所有现有比例应保持不变，并且外观应根据屏幕宽度而变大。

我需要的是这样的东西：

// PSEUDO CODE!

@media screen and (min-width: 1921px) {
  .content-block {
    zoom: calc (100vw divided by X)  // <- HERE
  }
}

例子：

X            = 15 
Screen width = 4000px 
Zoom-factor  = 400 / 15 ~ 266% 

X 是任何神奇的数字。

有人可能会认为如果 1900 是 100%，也许 19.2 可能更合适，但我已经尝试过很多数字；15 非常适合我目前的情况。例如，如果屏幕宽度为 4000px，我需要缩放 266%。这里X的选择不应造成混淆。

根据设置的媒体查询，缩放仅从 1921px 开始，但这也是次要问题。

它主要是确定动态缩放系数，该系数根据分辨率（也根据当前窗口宽度，因此是 100vw，而不是 100%）而变化，而不会创建大量媒体查询。

最后注意事项：

我已经开始赏金一次了。给出的答案是错误的。我不知道为什么人们会投票。如果您单击“运行代码片段”并在新窗口中打开结果并调整窗口大小，您会发现，调整窗口大小时它不起作用。

在所需的解决方案中，当您调整窗口大小时，缩放系数应不断变化。

最后但并非最不重要的：

请不要使用 JavaScript，仅使用 CSS 解决方案。如果它能在 Chrome 和 Edge of Today 中运行就足够了。