Question

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

请访问我的网站{/ 3}}

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

提前致谢！

Answer 1

如上所述，如果要更改字体大小（或基于浏览器/屏幕大小的任何其他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

请注意，您需要在页面中包含https://github.com/scottjehl/Respond等库，以支持旧浏览器

Answer 2

此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;}
    }

Answer 3

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

http://css-tricks.com/viewport-sized-typography/

http://caniuse.com/viewport-units告诉浏览器支持

Codepen Demo

<强> CSS

p {
  font-size:1vw;
}

<强> JQ

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

Answer 4

我强烈建议不要将px用于字体大小，因为每个浏览器都有不同的标准字体大小。但是，有一种替代方案可以为您提供您想要的所有浏览器的结果，无论新旧。

的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*/
 }

如果你想尝试一下，这里的html是为了向你显示差异

HTML：

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

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

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

4 个答案: