-1

Can I shrink or expand text according to browser resolution just using html and css?

Basically I want to create a website which is compatible with 1024x768 and 320x480. I managed everything to shrink to size (images, video) but I wasn't able to find a way to shrink the text from 1024x768 to 320x480.

Has anyone got a simple solution to this? Has anyone had the same problem?

I'm open to any ideas which involve css3 and html5, I dont't want to use anything else javascript,jquery. That are the specifications given to me.

4

2 回答 2

1

你可以使用类似的东西

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

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

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

于 2014-01-22T21:31:25.303 回答
1

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

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

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

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

CSS3 规范定义了其他相对大小单位：

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

于 2014-01-22T21:57:25.887 回答