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

2024-12-31 14:53:24
推荐回答(5个)
回答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:应用于屏幕阅读器等发声设备

回答2:

可以用vw或者vh实现。

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

回答3:

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

回答4:

把字体的大小设置为em

回答5:

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

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