我不明白为什么我缩小屏幕时字体没有减小。
我将所有CSS都设置为百分比,以便所有内容都能响应。
相反,当我缩小屏幕时,字体不会改变大小,从而弄乱了设计。
我正在24英寸显示器上构建我的投资组合站点,然后在13英寸屏幕上对其进行检查以确保它可以缩放。
#about { height: 100%; width: 100%; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.12, #061419), color-stop(0.61, #36875F)); background-repeat: no-repeat; } #about .container-fluid, #about .container-fluid .row { height: 100%; width: 100%; } .about-left { height: 100%; background-image: url('../../images/jay-ocean.jpg'); background-repeat: no-repeat; background-position: 0 100%; } .about-right { width: 50%; } .about-content { width: 50%; margin: 0 auto; padding-top: 23%; text-align: center; } .about-content-title h1 { text-align: center; font-size: 320%; } .about-content-info p { font-size: 110%; word-spacing: 0.8em; } .about-personal-info h4 { font-size: 110%; word-spacing: 0.8em; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <section id="about"> <div class="container-fluid"> <div class="row"> <div class="about-left col-lg-6 col-md-6 col-sm-12 col-xs-12"> </div> <div class="about-right col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="about-content"> <div class="about-content-title"> <h1>I'M JAY.</h1> </div> <br /> <div class="about-content-info"> <p>An entrepenurial minded, Full Stack Developer. Whenever I'm up against a challenge that I care about, it gives me a rush. Focusing on the big picture is important to me, but I never forget the smaller details. Anything that is not challenging is boring, and makes me yawn. <br /> <br />Currently seeking a Javascript position, using the MEAN stack, in New York City. Being rebellious, ambitious, and hard working are values that are very important to me. I want to join a company that has similar values and has goals of reaching ridiculous levels of success, not just modest realistic ones. I love working with a solid team. </p> </div> <br /> <div class="about-personal-info"> <h4>Email:</h4> <h4>ICON ICON ICON ICON</h4> </div> </div> </div> </div> </div> </section>
我认为您要寻找的是 视口百分比单位 。
尝试这个:
.about-content-title h1 { font-size: 5vw; }
通过此调整,当您调整浏览器窗口的大小时,字体将按比例缩放。
从规格:
5.1.2。视口百分比长度:对vw,vh,vmin,vmax单位
vw
vh
vmin
vmax
视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时,将对其进行相应缩放。
使用百分比值(%)不会相对于视口缩放字体,因为这些值是相对于父项或祖先的。参见规格: 4.3。 百分比:<percentage>类型
<percentage>