css - 初始规模与 desktop.css+phone.css+tablet.css？

Question

我刚刚发现了 initial-scale 元属性。

以前，我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素)，以便它们在桌面计算机的屏幕上显示得很好。然后，如果您使用的是手机或平板电脑，我可能会使用媒体查询或 PHP 来包含 phone.css 或 tablet.css，这将仅针对较小的设备调整尺寸。

但既然我已经意识到初始比例的概念，我是否应该使用它来控制元素的大小？

我试图得到的一个非常重要的结果是......我用 EM(或 REM)单位来定义我的字体大小，如下所示:

/*desktop.css*/
html{font-size:62.5%;}
p{font-size:1.2em;}
span {font-size:1em;}

/*phone.css*/
html{font-size:125%;}

/*tablet.css*/
html{font-size:100%;}

换句话说，我的 phone.css 和 tablet.css 只调整 html 元素上的字体大小百分比，所有其他元素将在所有不同设备上相应地缩放。在某种程度上，我使用填充、边距、行高和字母间距来做到这一点。

随着初始比例的引入，这是否意味着 EM/REM 单位与缩放字体大小无关？我们可以坚持使用更直观的 PX 单位吗？让 initial-scale 完成其余的缩放工作？

Answer 1

关于 em 单位的事情是它应该在设备和屏幕密度之间显示相同，因为实际高度由客户决定。

我还在一些应用程序中使用初始比例、最小比例和最大比例，并且发现 px 单位工作得相当好，只要您为每个设备的比例选择合适的值。