Html 如何在最小化浏览器CSS时使文本变小

我遇到了一个问题，每当我把浏览器变小时，文本都会保持不变，不会变小。当浏览器变小时，如何使文本变小

请访问我的网站

.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}

---

提前谢谢

这个css应该适合你。。。只需根据需要调整/删除查询分隔符，并调整字体大小即可

.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}

    @media all and (min-width: 1281px){ 
    .home{font-size:25px;}
    }

    @media all and (min-width: 1025px) and (max-width: 1280px) {    
        .home{font-size:22px;}
    }

    @media all and (min-width: 769px) and (max-width: 1024px) { 
        .home{font-size:18px;}
    }

    @media all and (min-width: 481px) and (max-width: 768px) {
        .home{font-size:16px;}
    }

    @media all and (min-width: 321px) and (max-width: 480px) {
        .home{font-size:14px;}
    }

    @media all and (max-width: 320px) {
        .home{font-size:14px;}
    }

---

如上所述，如果要更改字体大小（或基于浏览器/屏幕大小的任何其他CSS值），则需要使用媒体查询

下面是基于手机屏幕大小的示例

// Work For All Other Screens Except the one which we redefine in bottom
.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

.home {
font-size:20px;
}

}

您只需定义要更改浏览器的值，其余所有值形成上述样式，并且仅在屏幕大小320px上将字体大小更改为20px

---

请记住，您需要在页面中包含类似的库以支持较旧的浏览器

可以使用视口单元，但由于一个小错误，它确实需要少量的JS/JQ

告诉浏览器支持

CSS

p {
  font-size:1vw;
}

JQ

causeRepaintsOn = $("p"); /* could include any text related tags */
$(window).resize(function() {   causeRepaintsOn.css("z-index", 1); });

---

我强烈建议不要在字体大小上使用px，因为每个浏览器一开始都有不同的标准字体大小。但是，有一种替代方法可以在所有浏览器（新旧浏览器）中为您提供所需的结果

css:

如果你想尝试一下，这里是html来告诉你区别

html:

你好

您好

---

你可以使用

CSS

媒体查询，因此当它低于/介于某个宽度之间时，可以更改字体大小-你想要的是。我已经尝试过了，但没有达到我想要的效果，可以将你尝试过的媒体查询以及相应的CSS添加到你的帖子中。看看：

 #px {
 font-size:25px;  /*this was the size you want*/
 }

 #percent {
 font-size:160%;   /*this is what it is in % but give you the support for crossbrowser coding*/
 }

<p id="px">HELLO</p>

<p id="percent">HELLO</p>