IE8中css字体大小自适应设置

html-css029

IE8中css字体大小自适应设置,第1张

要通过代码设置,C语言<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>Demo</title> <style type="text/css">

#box { font-size: 4vw}</style></head><body> <div id="box">

我是靖鸣君 我是靖鸣君 我是靖鸣君</div></body></html>

但是该方案存在一个bug,上面的代码,当浏览器窗口变化的时候,box中的文字并没有按照应有的比例变化,但是css3标准中是这么说的:

When the height or width of the viewport is changed, they are scaled accordingly.

可以使用”相对长度单位“ em ,相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。所有浏览器支持

例如:

font-size:1em

css3中有很多新的单位,其中一个是vw 。

如果你设置 font-size:10vw就代表一个文字占屏幕宽度的10%;

如果你设置 font-size:20vw就代表一个文字占屏幕宽度的20%;

这样文字就可以随屏幕的大小而自动适应

不过这个属性ios可以兼容,安卓并不兼容。