如何使我的字体大小具有响应性？

Question

我正在尝试使一些大标题具有响应能力。我尝试了几种方法，比如：这个 链接。但是它没有起作用。

CSS

body {
    margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigationchanges. */  
}


#page-wrap {

  width: 760px;
  margin: 0 auto;
}

.title {
    font-family: Brush Script MT,cursive;
    font-size: 10vw;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;

}

#welcome {
    @extend .title;   
}

#to {
    @extend .title;
    text-align: center;
    font-size: 50px;   
}

#mp{
    @extend .title;
    text-align: right;

}


.full { 
   background-image: url('../img/beach-bg1920-1080.jpg');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;

}



/*******navbar elements *********/
.navbar-inner {
    background:transparent;
    border: solid#ffffff 2px;
}

.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;
    background-color: $hover-color;
}
.navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
    color: white;
}

.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
    color: #ffffff;
}
.navbar-brand:focus, .navbar-brand:hover {
    text-decoration: none;
}

/*******navbar elements End *********/

HTML

    <div id="page-wrap">           
        <h1 id="welcome">Welcome!</h1>
        <h2 id="to">to</h2>
        <h1 id="mp">My Portfolio!</h1>
    </div>  

你看不到“我的投资组合”这个词。我正试图将所有内容向左移动，换句话说，我只想确保在移动设备上看起来没问题。

- Maduro

---

可能是 响应式字体大小 的重复问题。 - Kyle

我尝试了那些答案，但都没有起作用，而且我也是从那个页面获取到了我的链接。@KyleMessner - Maduro

你想让它像 font-size: #vw; 的例子一样精确地改变大小，还是想让它像媒体查询的例子一样跳到预定的大小？ - Kyle

更改大小。我只是想确保它在移动设备上看起来很好。但是，任何东西都会有用... - Maduro

你是否已经链接了100%的CSS/HTML？仅凭你提供的内容，我已经能够让“vw”正常工作了。 - Kyle

Answer 1

检查一下这段代码。

#welcome{
  font-size:10vw;
}
#to{
  font-size:6vw;
}
#mp{
  font-size:12vw;
}

<div id="page-wrap">           
  <h1 id="welcome">Welcome!</h1>
  <h2 id="to">to</h2>
  <h1 id="mp">My Portfolio!</h1>
</div>

通过给字体指定响应式单位，我们可以使字体大小具有响应性。px单位不具有响应性，而百分比（％）、vh/vw、em、rem单位具有响应性。

在所提供的示例链接（css tricks）中，他们使用视口单位使字体具有响应性。 viewport unit就是vh，vw。 vh是：视口高度，vw是视口宽度。

如果您为字体指定vw单位，它将根据屏幕宽度改变/具有响应性。

- Vinaya

---

是的，它可以工作。但是存在一个问题。不确定你是否注意到我正在使用：text-align:center和right，所以当我改变窗口大小时，所有内容都会错位。是否有一种方法可以使一切在窗口变小时（例如移动设备）也能看起来整洁？ - Maduro

你想把“欢迎来到我的作品集”这句话放在一行吗？ - Vinaya

我刚刚附上了一张图片。=) - Maduro

你写过其他的 CSS 吗？比如重置 CSS 等等。 - Vinaya

我刚刚发布了我的 CSS（所有行）。 - Maduro

Answer 2

对我来说，只需将150px更改为10vw即可解决问题。

.title, #welcome, #to, #mp {
  font-family: Brush Script MT,cursive;
  font-size: 10vw;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
}

#to {
  text-align: center;
  font-size: 50px;
}

#mp {
  text-align: right;
}

<div id="page-wrap">           
  <h1 id="welcome">Welcome!</h1>
  <h2 id="to">to</h2>
  <h1 id="mp">My Portfolio!</h1>
</div> 

- Kyle

Answer 3

Use vw instead of pixel for more details https://css-tricks.com/viewport-sized-typography/

.title {
  font-family: Brush Script MT, cursive;
  font-size: 15vw;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
}

#welcome {
  @extend .title;
}

#to {
  @extend .title;
  text-align: center;
  font-size: 13vw;
}

#mp {
  @extend .title;
  text-align: right;
  font-size: 10vw;
}

<div id="page-wrap">
  <h1 id="welcome">Welcome!</h1>
  <h2 id="to">to</h2>
  <h1 id="mp">My Portfolio!</h1>
</div> 

- user5337341