我可以根据浏览器分辨率缩小或扩大文本吗答案

【问题标题】：Can I shrink or expand text according to browser resolution我可以根据浏览器分辨率缩小或扩大文本吗
【发布时间】：2014-01-23 05:57:25
【问题描述】：

仅使用 html 和 css 是否可以根据浏览器分辨率缩小或扩展文本？

基本上我想创建一个兼容 1024x768 和 320x480 的网站。我设法将所有内容缩小到大小（图像、视频），但我无法找到将文本从 1024x768 缩小到 320x480 的方法。

有人对此有简单的解决方案吗？有人遇到过同样的问题吗？

我对涉及 css3 和 html5 的任何想法持开放态度，我不想使用任何其他 javascript、jquery。那是给我的规格。

【问题讨论】：

我个人认为制作移动兼容网站的最佳选择之一是使用 bootstrap3。由于信息量很大，可能需要一点学习曲线，但我认为这是值得的。 getbootstrap.com

【解决方案1】：

你可以使用类似的东西

@media screen and (max-width: 500px) { 
    body { font-size: 12px;}
}

为不同的分辨率设置不同的规则

并将<meta name="viewport" content="width=device-width" /> 添加到 html 头部，否则某些移动浏览器会评估 css 像素，就好像它们具有更大的屏幕分辨率一样（以便或多或少正确地显示为更大屏幕设计的页面）。

【讨论】：

【解决方案2】：

CSS3 定义了适合此目的的单位vw。 vw 是视口宽度的 1%，因此很难猜出正确的尺寸。但是，例如，它对于在可缩放背景图像上调整文本大小非常有用。

像任何更熟悉的单位一样使用它，例如

h1 { font-size:3vw; }
p, li { font-size:1.5vw; }

您还可以将它与媒体查询结合使用以提供最小文本大小。

CSS3 spec 定义其他相对大小单位：

‘rem’：根元素的字体大小
‘vw’：视口宽度的 1%
‘vh’: 1% 视口高度
‘vmin’：视口较小尺寸的 1%
‘vmax’：视口较大尺寸的 1%

【讨论】：