檬味博客 » 问答 » 在CSS中怎样设置浏览器字体随窗口尺寸变化而变化

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

根据现实中的分辨率大小来设置css来控制。media screen and (min-width: 200px) { body { font-size: 10px;} } media screen and (min-width: 1000px) { body { font-size: 50px;} }
在CSS中怎样设置浏览器字体随窗口尺寸变化而变化
用js实现，js里有个onresize方法，把它加在window对象上，然后在里面写你的处理函数，比如说你这里的字体改变。具体思路大概如下：
window.onresize=function(){
//1.判断窗体高度和宽度
//2.根据窗体高和宽设置某元素字体大小
}
我没有运行代码，你自己按着这个思路调试一下，应该可以2014-01-01
根据现实中的分辨率大小来设置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：应用于屏幕阅读器等发声设备
2019-11-15
<html>
<head>
<title>test</title>
<style type="text/css">
.test{font-size:50px;}
@media screen and (max-height:200px){
.test{font-size:10px;}
}
</style>
</head>
<body>
<div class="test">
字体变化
</div>
</body>
</html>2014-01-01
可以用vw或者vh实现。

注：vw是把整个屏幕宽度分成100份，10vw就代表占整个屏幕宽度的百分之十，同理，vh是把整个屏幕的高度分成100份，10vh代表占整个屏幕高度的百分之十，当窗口的大小缩小时，相对应的1vw的宽度和1vh的高度也会相对应的减小2015-07-03
把字体的大小设置为em2014-01-01
你可以试试css3中的一个新单位 rem 。
附件是我给你的一个例子，不过使用jquery来实现的，很好用。
2015-06-09
mengvlog 阅读 37 次 更新于 2025-09-10 02:12:27 我来答关注问题0
6 个回答檬味博客专题活动
  • 小标ak 在CSS中怎样设置浏览器字体随窗口尺寸变化而变化

    根据现实中的分辨率大小来设置css来控制。media screen and (min-width: 200px) { body { font-size: 10px;} } media screen and (min-width: 1000px) { body { font-size: 50px;} }

  • 湖北倍领科技 CSS网页字体要实现不管是在任何浏览器和系统中都要显示同一种字体怎么办

    要在网站上使用自定义字体，首先需要准备相应的字体文件，如.ttf格式。接着，在CSS中使用@font-face属性定义字体。例如：font-face { font-family: '我的字体';src: url('path/to/myfont.ttf');} 通过这种方式，可以确保网站上的文本使用指定的字体，而不论用户的浏览器或操作系统是什么。需要注意...

  • 小鹏说科技 css里如何设置字体大小随浏览器大小变化而变化?

    按住ctrl,然后滚动鼠标的滚轮，就行了，如果你是笔记本的话，直接把两根手指放在触控板上，向反方向移动就放大字体，靠近的话就缩小字体，不过只能暂时修改，至于想固定下来，冒似现在谷歌浏览器还没有这个功能，毕竟是做速度的，很多功能都剔除了，不过现在还不是正式版的，以后版本不知道啊 搜狗浏览器如...

  • 阿暄生活 关于CSS 中各浏览器字体上下位置不一致 求如何实现一致

    要解决CSS中各浏览器字体上下位置不一致的问题，可以采取以下方法：重置内外边距：使用通配符选择器*将所有元素的内外边距设置为0，以消除不同浏览器默认样式的差异。“`css{margin: 0;padding: 0;}2. **固定高度与行高**： 为包含文本的容器设置固定高度，并通过`lineheight`属性来确保文本在容...

  • xnlpktg CSS代码如何设置图片周围字体环绕?

    1、准备一张图片，新建一个空白html文件 2、其中html文件内容如下图所示，html中包含了一张图片，及对应的描述段落 3、给html添加head标签，在标签中定义样式。 p {border:1px solid red;} img {float:left; margin:0 5px 5px 0;} 4、用chrome浏览器打开上面的html文件，可以看到文字绕排效果...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部