CSS，有没有办法在整个平台和设备上保持相同的宽度（物理设备宽度）

Question

我们知道可以使用@media查询来更改元素的宽度（或任何属性）的不同方法

我们可以使用Aspect像素比率，设备宽度和高度。https://developer.mozilla.org/en-US/docs/Web/CSS/@media

要求：我们必须在整个平板上保持元素的物理宽度相同，在Mobile，桌面或任何DPI元素中应该看起来相同。

我尝试使用em，vw，％，没有运气。如果我使用了所有这些元素，则该元素的物理外观将从一种变形变为另一种变形。有些设备看起来很小，有些设备看起来很大。

谁能建议我如何实现这一目标。

Answer 1

也许您可以尝试使用vmin和vmax，它们是基于vh和vw的，但是您可以通过这些措施设法保持非常好的长宽比。我经常将vmin用于更具体的度量，例如字体大小，图像大小等等。我建议您使用vmax来实现其他措施，例如容器等。我还使用CSS变量来介绍这些内容，并在媒体查询中缩小某些内容，并且使用vmin和vmax，我可以跳过几种媒体。例如，在这里您有一个小的字体尺寸摘录

:root
{
  --text-size: 2.1vmin;
}
.px
{
  font-size: 16px;
}
.vmin
{
  font-size: var(--text-size);
}
@media only screen and (max-width: 700px)
{
  :root
  {
    --text-size: 3.5vmin;
  }
  .px
  {
     font-size: 12px;
  }
}

<p class='px'>Here is the example text with px</p>
<p class='vmin'>Here is the example text with vmin</p>

Answer 2

对于带浏览器chrome的台式机> = 28，野生动物园> = 9 IE> = 12歌剧> = 14使用以下媒体查询。

@supports (-webkit-appearance:none)

您可以在下方使用适用于任何移动设备的媒体查询纵向模式。

@media (max-width:720px) and (orientation:portrait)

此外，如果您同时希望移动设备在横向模式下响应您也可以使用以下媒体查询来解决此问题。

@media only screen and (orientation:landscape)
and (min-device-width: 319px) 
and (max-device-width: 1024px)

[在大多数情况下，Internet Explorer中存在响应问题，您可以在下面的媒体查询中使用。

@media screen and (min-width:0\0)

我本人已经测试了上面提到的这些媒体查询，请随时告诉我任何查询。希望我的解决方案可以帮助您！！！！！！