我在页面的标题中添加了一个blockquote,并试图使其具有响应性,以使文本适应屏幕大小。我希望文本保持居中,并根据浏览器更改大小。
我尝试将字体大小更改为vw
单位。
.container {
width: 590px;
margin: 140px auto;
position: relative;
}
blockquote {
width: 565px;
font: 2.65em CallunaRegular;
letter-spacing: .075em;
float: left;
padding: 45px 0 30px 25px;
margin: 0;
border-top: 2px dotted #858585;
border-bottom: 2px dotted #858585;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
}
.container:before {
content: "“";
font-size: 13vw;
position: absolute;
left: -100px;
color: #666;
}
.container:after {
content: "”";
font-size: 13vw;
position: absolute;
right: -100px;
top: 150px;
color: #666;
}
blockquote:first-line {
font: 1.85em "Sketch Block";
color: #fff79e;
}
blockquote:first-letter {
font-size: 2.9em;
text-transform: uppercase;
float: left;
line-height: .52em;
margin-right: -18px;
position: relative;
z-index: 1;
}
blockquote strong:first-child {
margin-left: 8px;
letter-spacing: 0;
}
blockquote strong:last-child {
font: 2em "Museo 700";
text-transform: uppercase;
letter-spacing: 0;
}
blockquote em {
border-bottom: 2px dotted #858585;
}
blockquote+b {
float: right;
margin-top: 10px;
font: 1.6em CallunaRegular;
letter-spacing: .15em;
}
blockquote+b:first-letter {
color: #fff79e;
font-size: 1.3em;
font-style: italic;
letter-spacing: .25em;
}
@-moz-document url-prefix() {
blockquote:first-letter {
margin-top: -29px;
}
}
<div>
<header>
<article class="container">
<blockquote>
<strong>This</strong> Is<em>Just</em> An
<strong>Example</strong>
</blockquote>
<b>Example.</b>
<a href="#About" class="down-btn">↓</a>
</article>
</header>
</div>
我希望在更改浏览器大小时重新调整块引用的大小。
答案 0 :(得分:0)
只需更改
宽度:565像素至 100% 并添加最大宽度:565px 。
容器类也是如此。 宽度:100%和最大宽度:590px 。