如何使我的塊引用響應不同的屏幕尺寸？

Question

我在頁面的標題中添加了一個塊引用，並試圖使其具有響應性，以便文本適應屏幕大小。 我希望文本保持居中，並根據瀏覽器更改大小。

我嘗試將字體大小更改為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">&#8595;</a> </article> </header> </div>

我希望在更改瀏覽器大小時塊引用會調整大小。

Answer 1

只是改變

width: 565px到100%並添加max-width: 565px 。

容器類也是如此。 width: 100%和max-width: 590px 。