檬味博客 » 问答 » 在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 阅读 10 次 更新于 2025-07-18 10:59:24 我来答关注问题0
6 个回答檬味博客专题活动
  • 湖北倍领科技 怎么用css设置兼容浏览器的字体

    通过这种方式，可以确保字体大小在不同浏览器中保持一致。如果需要进一步调整字体大小，可以使用百分比来实现。例如：h1{ font-size:150%; } 这里，h1元素的字体大小将会是基础字体大小的150%。这种方法不仅可以让字体大小在不同浏览器中保持一致，还能灵活调整字体的大小，以适应不同的设计需求。

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

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

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

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

  • 文暄生活科普 css如何设置字体大小css如何设置字体大小为h1

    如何让字体大小随着浏览器大小而变化？打开浏览器，在浏览器顶部找到此视图按钮。如图所示。然后做出如下图所示的选择。接下来，设置你想要的字体大小。当然，你也可以通过缩放页面来改变文本的大小。打开百度首页如下。这个时候，一直按住你的ctrl键，不要动。同时鼠标滚轮向上滚动放大上面的字。如下图所示。

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

    css里如何设置字体大小随浏览器大小变化而变化？把字体设置为em，不要设置为PX。设置方法：将原来的px数值除以10，然后换上em作为单位;重新计算那些被放大的字体的em数值。避免字体大小的重复声明。em的特点：em的值并不是固定的;em会继承父级元素的字体大小。字体大小会跟随浏览器的大小变化而变化吗你...

其他CSS类似问题

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

CSS相关话题

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