具有恒定像素字体大小的响应式文本大小?
Responsive Text Size with a Constant Pixel Font-Size?
在移动版 https://www.gofundme.com/ 这样的网站上,文本大小是自适应的,但活动 font-size
保持恒定值,例如 34px。
Here's the same view on different screen sizes.
当我更改 window 的大小时,网站文本的大小与屏幕大小保持成比例。当屏幕为 500px 时出现在第二行的单词仍然在第二行,即使屏幕宽度完全不同(200px 与 2000px)。从最后一个字母到屏幕右边缘的相对距离在所有屏幕尺寸上都是相同的。
因为 font-size
以像素为单位,我希望文字的位置取决于屏幕尺寸,但在 gofundme.com 上似乎并非如此。
这是怎么做到的?
我认为这是由于 <head>
:
中指定的固定视口大小所致
<meta name="viewport" content="width=640, user-scalable=no">
这会导致整个页面缩放以适应设备(保持 640 像素宽视口的比例),而不是调整和移动单个内容元素。
在移动版 https://www.gofundme.com/ 这样的网站上,文本大小是自适应的,但活动 font-size
保持恒定值,例如 34px。
Here's the same view on different screen sizes.
当我更改 window 的大小时,网站文本的大小与屏幕大小保持成比例。当屏幕为 500px 时出现在第二行的单词仍然在第二行,即使屏幕宽度完全不同(200px 与 2000px)。从最后一个字母到屏幕右边缘的相对距离在所有屏幕尺寸上都是相同的。
因为 font-size
以像素为单位,我希望文字的位置取决于屏幕尺寸,但在 gofundme.com 上似乎并非如此。
这是怎么做到的?
我认为这是由于 <head>
:
<meta name="viewport" content="width=640, user-scalable=no">
这会导致整个页面缩放以适应设备(保持 640 像素宽视口的比例),而不是调整和移动单个内容元素。