css - 如何让DIV在手机屏幕上自动缩放到设备宽度？

问题描述

问 题

现在的显示效果如下，为何上面3列的这个DIV不能缩放到100%宽度？

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 关于我们 -->
<div id="dvAboutUs">
    <div id="dvContentAbout">
        <div id="dvTitleAbout"><img src="images/mainUI/titleAboutUS.gif"></div>
        <div id="dvTextAbout"><img src="images/mainUI/textAboutUS.gif"></div>
        <div>
            <div class="inALine"><img src="images/mainUI/aboutContent1.gif"></div>
            <div class="inALine"><img src="images/mainUI/aboutContent2.gif"></div>
            <div class="inALine"><img src="images/mainUI/aboutContent3.gif"></div>
        </div>
    </div>
</div>
<!-- 关于我们 close -->

#dvAboutUs
{
    width: 100%;
    height: 50rem;
    text-align: center;;
    padding-top: 5rem;
}

#dvTitleAbout
{
    margin: 0 auto;
    width: 81rem;
    text-align: left;
}

#dvTextAbout
{
    margin: 0 auto;
    width: 81rem;
    height: 250px;
}

#dvContentAbout
{
    margin: 0 auto;
    width: 81rem;
    text-align: left;
}

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

可以使用flexible+rem来适配，可以看看这篇博客移动端屏幕适配的解决

这篇关于css - 如何让DIV在手机屏幕上自动缩放到设备宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！