需求
移动端要求弹窗显示如图：
先上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (max-375px) {
html {
font-size: 44px
}
}
@media screen and (min-375px) and (max-414px) {
html {
font-size: 50px
}
}
@media screen and (min-414px) {
html {
font-size: 55px
}
}
* {
margin: 0;
padding: 0;
}
html,body {
100%;
height: 100%;
position: relative;
}
body {
background-color: #ccc;
}
.m_container {
position: absolute;
100%;
height: 100%;
left: 0;
}
.m_content {
80%;
height: 5rem;
border-radius: 10px;
background-color: #fff;
text-align: center;
position: absolute;
left: 10%;
top: 50%;
transform: translateY(-50%);
}
.m_content h4 {
margin: 11% 0 4%;
font-size: .34rem;
}
.m_zytz {
46%;
margin-top: 4%;
margin-bottom: 1%;
}
.m_content .e_text {
display: block;
color: #000;
height: 4rem;
font-size: .28rem;
line-height: .45rem;
text-align: left;
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.e_item {
84%;
margin-left: 8%;
color: #878787;
font-size: .24rem;
display: flex;
text-align: left;
}
.e_item_title {
flex-wrap: nowrap;
flex-shrink: 0;
}
.e_text8888 {
display: inline-block;
font-size: 0.5rem;
margin-bottom: 1px;
vertical-align: bottom;
}
.e_texty {
font-size: 0.36rem;
}
</style>
</head>
<body>
<div class="m_container">
<div class="m_content">
<h4>重要通知</h4>
<div class="e_text">
<div class="e_top_text">
截止2020年12月31日24时，集齐所<br>有勋章的幸运儿将<span style="color: #ee2a29;font-weight: bold;">可获得【战斗基】</span>
</div>
<div style="color: #ee2a29;font-weight: bold;margin-bottom: 2%;">
勋章，瓜分 <span class="e_text8888">8888</span><span class="e_texty">元</span> 现金大奖！
</div>
<div class="e_item">
<span class="e_item_title">领奖时间：</span>
<span class="e_item_text">2021年1月4日15时 - <br>2021年1月10日17时</span>
</div>
<div class="e_item">
<span class="e_item_title">领奖路径：</span>
<span class="e_item_text">活动首页【勋章墙】- <br>点击【战斗基】勋章</span>
</div>
</div>
</div>
</div>
</body>
</html>
问题
要求适应不同尺寸的移动端设备，在写的过程中就出现了以下问题：
-
问题：文字换行的问题，导致左右两侧不能对齐。
解决：使用了br换行，随之出现了下边这个问题。 -
问题：使用br换行后，由于弹窗m_content设置了宽度，有的设备中的一行文字并没有占满弹窗，会导致文字显示偏左。
解决：去掉m_content的宽度，并设置e_text如下css：position: absolute; left: 50%; transform: translateX(-50%); //让文字居中显示 white-space: nowrap; //设置文字不换行 -
问题：文案中“8888”的数字和汉字底部不齐。
解决：设置“8888” vertical-align: bottom;并且上下微调：margin-bottom: 1px; -
问题：“领奖时间”“领奖路径”两段文字使用了flex布局，某些设备“领奖时间”4个字出现了换行，我们希望实现“领奖时间”在任何设备都不换行，并且所占宽度刚好为这4个字的宽度。
解决：给“领奖时间”设置了不换行，同时设置flex-shrink: 0;即希望该容器在任何时候都不被压缩，代码如下：.e_item_title { flex-wrap: nowrap; flex-shrink: 0; }上面代码中的flex-shrink: 0;也可以用 auto;或者flex-basis: auto;来替换，这也同样可以达到我们的目的。
如果子容器的 flex-basis 设置为 auto(width 也可以)，那么计算剩余空间的时候将会根据子容器内容的多少来预留空间。