html – 使填充响应

前端之家收集整理的这篇文章主要介绍了html – 使填充响应前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我刚开始使用Bootstrap,而且我是前端开发的新手.我遇到填充问题,因为它在桌面和移动设备中仍然保持相同的大小.

HTML代码

<div class="container" id="i-container">
        <h3>We possess high quality products &mdash; therefore our customers are always loyal</h3>
  </div>

CSS代码

#i-container{
        border: solid;
        border-color: rosybrown;
        padding-left: 150px
        padding-top: 10px;
    }

如上所述,在移动设备中,填充保持不变(它似乎没有响应).顺便说一句,我也试过使用em.它也没有帮助.

解决方法

使用百分比作为度量单位,同时使您的网站响应.如果您希望像素具有响应性,则像素不起作用.如果使用百分比,则会根据屏幕大小进行测量.但是如果使用像素,则填充对于所有尺寸都保持不变.简单地说,改变你的CSS,如下所示:
#i-container{
        border: solid;
        border-color: rosybrown;
        padding-left: 12%;
        padding-top: 0.5%;
    }

使用您想要的百分比.

猜你在找的HTML相关文章