我正在尝试让一些大标题响应。我尝试了一些事情,例如:这个 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>
您看不到“我的投资组合”一词。我想把所有东西都移到左边。换句话说,我只是想确保这在移动设备上看起来没问题。
最佳答案
检查这段代码。
#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 技巧)中,他们使用视口(viewport)单元来使字体响应。 视口(viewport)单位不过是 vh,vw。 vh 是:视口(viewport)高度,vw 是视口(viewport)宽度。
如果您为字体指定 vw 单位,它会根据您的屏幕宽度改变/响应。
关于css - 如何使我的字体大小响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36213942/