Question

在CSS中怎样设置浏览器字体随窗口尺寸变化而变化

假设当浏览器高度为1000px时，字体高度是50px。当浏览器高度变化到200px时，字体高度相应变化为10px。
能在css中实现吗？

Answer 1

根据现实中的分辨率大小来设置css来控制。

@media screen and (min-width: 200px) {

body {

font-size: 10px;

}

}

@media screen and (min-width: 1000px) {

body {

font-size: 50px;

}

}

扩展资料： 

CSS3 @media 查询：

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

CSS 语法：

@media mediatype and|not|only (media feature) {
CSS-Code;
}

媒体类型：

all：用于所有设备      

print：用于打印机和打印预览    

screen：用于电脑屏幕，平板电脑，智能手机等。    

speech：应用于屏幕阅读器等发声设备

Answer 2

可以用vw或者vh实现。

注：vw是把整个屏幕宽度分成100份，10vw就代表占整个屏幕宽度的百分之十，同理，vh是把整个屏幕的高度分成100份，10vh代表占整个屏幕高度的百分之十，当窗口的大小缩小时，相对应的1vw的宽度和1vh的高度也会相对应的减小

Answer 3

用js实现，js里有个onresize方法，把它加在window对象上，然后在里面写你的处理函数，比如说你这里的字体改变。具体思路大概如下：
window.onresize=function(){
//1.判断窗体高度和宽度
//2.根据窗体高和宽设置某元素字体大小
}
我没有运行代码，你自己按着这个思路调试一下，应该可以

追问

javascript还不会，相信你，应该可以。不过我说的是CSS中，能实现吗

追答

依我看，纯css是不能实现这样的功能的

Answer 4

把字体的大小设置为em

追问

好像不行

Answer 5

你可以试试css3中的一个新单位 rem 。

附件是我给你的一个例子，不过使用jquery来实现的，很好用。