响应式文本标题

Question

我想让文本标题响应。正如您在 here 中看到的，标题是 "The Swift List"。我怎样才能让单词 "THE" 和 "LIST" 停留在单词 "SWIFT" 的边缘？我已经设法在正常屏幕尺寸下这样做了，但是当我改变屏幕尺寸时，它并没有像以前那样保持不变（在单词 "SWIFT" 的边缘）。

对于那些不想在新标签页中打开的人。我写的代码：

HTML

<p><span class="wordThe">THE</span>
<br><span class="textSwift">SWIFT</span>
<br><span class="wordList">LIST</span>

.carInfo {
  background: #05196b;
  height: 291px;
  color: #fff;
  padding: 15px 50px;
}
.wordThe {
  font-weight: bold;
  color: #ff1414;
  font-size: 2.5em;
  padding-left: 12%;
}
.textSwift {
  padding-left: 24%;
  font-style: italic;
  font-size: 4.5em;
  font-weight: bold;
  color: #fff;
  line-height: 0.5;
}
.wordList {
  font-weight: bold;
  color: #ff1414;
  font-size: 2.5em;
  padding-left: 67%;
}
.textAtRight {
  text-align: justify;
  direction: rtl;
  clear: both;
  float: right;
  letter-spacing: 1.5px;
}

<div class="row">
  <div class="col-md-6">
    <div class="carInfo">
        <p><span class="wordThe">THE</span>
        <br><span class="textSwift">SWIFT</span>
        <br><span class="wordList">LIST</span>
        <span class="textAtRight"><br>Lorem ipsum dolor sit amet
        <br>Consectetur adipisicing elit
        <br>dolor in reprehenderit in voluptate
        <br>velit esse cillum dolore eu
        <br>proident, sunt in culpa qui officia</span></p>
    </div>
  </div>
</div>

Answer 1

利用媒体查询帮助您更改不同宽度的代码。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

我认为你应该做的是利用查询和 flexbox 来实现这一点。

希望我已经回答了您的问题。我在视觉上很难理解你想要什么，所以如果我想出一个代码示例，我会分享它。

Answer 2

利用pseudo elements和data-attributes

CSS

.carInfo {
    background: #05196b;
    height: 291px;
    color: #fff;
    padding: 15px 50px;
    text-align:center;
}

.textSwift {
  font-style: italic;
  font-size: 4.5em;
  font-weight: bold;
  color: #fff;
  line-height: 0.5;
  display:inline-block;
  position: relative;
  padding:3.5rem 0;
}

.textSwift::before{
  content:attr(data-before);
  position: absolute;
  font-weight: bold;
  color: #ff1414;
  font-size: 3.5rem;
  top:0;
  left:0;
}

.textSwift::after{
  content:attr(data-after);
  position: absolute;
  font-weight: bold;
  color: #ff1414;
  font-size: 3.5rem;
  bottom:0;
  right:0;
}


.textAtRight {
  text-align: justify;
  direction: rtl;
  clear: both;
  float: right;
  letter-spacing: 1.5px;
}

HTML

<div class="row">
    <div class="col-md-6">
      <div class="carInfo">
        <p>
            <div>
                <span class="textSwift" data-before="THE" data-after="LIST">SWIFT</span>
            </div>

        <span class="textAtRight">
            <br>Lorem ipsum dolor sit amet
            <br>Consectetur adipisicing elit
            <br>dolor in reprehenderit in voluptate
            <br>velit esse cillum dolore eu
            <br>proident, sunt in culpa qui officia
        </span>

        </p>
      </div>
    </div>
    </div>

希望这对您有所帮助..

Link for reference

Answer 3

在以下部分更改 css:

.wordThe {
  font-weight: bold;
  color: #ff1414;
  font-size: 4.5vw;
  padding-left: 6vw;
}
.textSwift {
  padding-left: 22vw;
  font-style: italic;
  font-size:6.5vw;
  font-weight: bold;
  color: #fff;
  line-height: 0.5;
}
.wordList {
  font-weight: bold;
  color: #ff1414;
  font-size: 4.5vw;
  padding-left:52vw;
}

vw 计算为视口宽度的 1/100，它会随着您调整大小而动态变化 screen.similarly 如果您希望其他文本也具有响应性，则可以对它们应用相同的方法。

响应式文本标题

Responsive Text Heading

html

css

heading

twitter-bootstrap

responsive