我很困惑如何使此代码具有响应能力。请查看下面的示例并告诉我。
#appalign{font-family:"montserrat-regular",sans-serif;margin-left:32%;margin-right:10%;text-align:justify;text-justify:inter-word}#appalign1{font-family:"montserrat-regular",sans-serif;margin-right:55%;text-align:justify;text-justify:inter-word}
#appalign2{font-family:"montserrat-regular",sans-serif;margin-left:55%;margin-right:%;margin-top:-10%;text-align:justify;text-justify:inter-word}<div id="appalign1">
<p style="color: black">We believe in the power of a relationship – not just a relationship between you and us but with your customers as well. We work with you to deliver your message so that it captivates your audience and Target Group.<span style="font-weight:bold;color:black;"><font size="4"> We help you develop the right look, feel and personality</font></span> – a different<span style="font-weight:bold;color:black;"><font size="4"> brand image</font></span> that allows you to stand apart in the crowded market and above all get noticed. We make things simple and focus more on giving personal and effective customer service to you.</p>
</div>
<div id="appalign2">
<p style="color: black">We provide<span style="font-weight:bold;color:black;"><font size="4"> advertising solutions</font></span> that integrates with your marketing to bring you effective results. We harness the power of new media to build a strong brand and till we are convinced about one, we won’t recommend it to you. We use a mix of<span style="font-weight:bold;color:black;"><font size="4"> online, print, email, and social media</font></span> channels to tell your brand's story in a way that resonates with customers and forms lasting bonds.</p>
</div>就这样吧。你没有使用漂浮物等。我已经为你做了。
<div id="appalign1">
<p style="color: black">We believe in the power of a relationship – not just a relationship between you and us but with your customers as well. We work with you to deliver your message so that it captivates your audience and Target Group.<span style="font-weight:bold;color:black;"><font size="4"> We help you develop the right look, feel and personality</font></span> – a different<span style="font-weight:bold;color:black;"><font size="4"> brand image</font></span> that allows you to stand apart in the crowded market and above all get noticed. We make things simple and focus more on giving personal and effective customer service to you.</p>
</div>
<div id="appalign2">
<p style="color: black">We provide<span style="font-weight:bold;color:black;"><font size="4"> advertising solutions</font></span> that integrates with your marketing to bring you effective results. We harness the power of new media to build a strong brand and till we are convinced about one, we won’t recommend it to you. We use a mix of<span style="font-weight:bold;color:black;"><font size="4"> online, print, email, and social media</font></span> channels to tell your brand's story in a way that resonates with customers and forms lasting bonds.</p>
</div>
#appalign1 , #appalign2{float:left;width:50%;padding:0 20px;box-sizing: border-box;}
@media( max-width: 640px ) {
#appalign1 , #appalign2 { width: 100%; }
}
最简单的方法是添加一个容器并在其上应用
display:flex如果需要，您可以使用媒体查询切换小屏幕的 Flex 方向。
您必须将所有内联样式移到CSS文件中，并删除使用过时的标签，例如
font.container {
display: flex;
}
.appalign {
font-family: "montserrat-regular", sans-serif;
margin: 10px;
text-align: justify;
text-justify: inter-word
}
@media all and ( max-width: 660px) {
.container {
flex-direction: column;
}
}<div class="container">
<div class="appalign">
<p style="color: black">We believe in the power of a relationship – not just a relationship between you and us but with your customers as well. We work with you to deliver your message so that it captivates your audience and Target Group.<strong> We help you develop the right look, feel and personality</strong> – a different<strong> brand image</strong> that allows you to stand apart in the crowded market and above all get noticed. We make things simple and focus more on giving personal and effective
customer service to you.</p>
</div>
<div class="appalign">
<p>We provide<strong> advertising solutions</strong> that integrates with your marketing to bring you effective results. We harness the power of new media to build a strong brand and till we are
convinced about one, we won’t recommend it to you. We use a mix of<strong> online, print, email, and social media</strong> channels to tell your brand's story in a way that resonates with customers
and forms lasting bonds.</p>
</div>
</div>我刚刚发现使用大众汽车可以做到这一点。它们是与设置视口宽度相关的单位。有一些缺点，例如缺乏旧版浏览器支持，但这绝对是值得认真考虑使用的东西。另外，您仍然可以为旧浏览器提供后备，如下所示：
p
{
font-size: 30px;
font-size: 3.5vw;
}
请使用这个CSS，它工作正常。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#appalign1{font-family:"montserrat-regular",sans-serif;width:50%;float:left;text-align:justify;text-justify:inter-word;padding-right:1%;}
#appalign2{font-family:"montserrat-regular",sans-serif;width:50%;float:left;text-align:justify;text-justify:inter-word;}