Question

我正在努力让一些大的头衔响应。我尝试了一些例如：Link。但它没有用。

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>

你看不到“我的投资组合”这个词。我想把一切都移到左边。换句话说，我只是想确保这在移动设备上看起来不错。

Answer 1

检查此代码。

＆＃13;

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

＆＃13;

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

＆＃13;

我们可以通过为字体提供响应单元来使字体大小响应。 px单位没有响应，而百分比（％），vh / vw，em，rem单位是响应。

在给定的示例链接（css技巧）中，他们使用了视口单元来使字体响应。视口单位不过是vh，vw。 vh是：视口高度，vw是视口宽度。

如果你给vw单位字体，它会根据你的屏幕宽度改变/获得响应。

Answer 2

只需将150px更改为10vw即可。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用vw而不是像素了解更多详情https://css-tricks.com/viewport-sized-typography/

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: