根據瀏覽器分辨率我可以縮小或放大文本

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 '：視口的寬度
'vh' 的1％：根元素
' vw' 的字體大小的1％視口的高度
'vmin'：視口的較小尺寸的1％
'vmax'：視口的較大尺寸的1％