Question

我可以根据浏览器分辨率缩小或扩展文本，只需使用html和css吗？

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

有人有一个简单的解决方案吗？有没有人有同样的问题？

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

Answer 1

您可以使用类似

的内容

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

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

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

Answer 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％