Question

我想让它完全响应，但不知道它有什么问题！在PC或大屏幕设备中，它将是两个列的站点，但对于移动用户，它可以是一个列站点。请帮忙任何帮助将不胜感激。在此先感谢。

<html>

<style type="text/css">
body {background-color:white;}
.container {background:whitesmoke;max-width:800px;margin:auto;}
.header {background-color:tomato;color:white;font-size:25px;text-align:center;
padding:5px 0px 5px 5px;max-width:800px;margin:auto;font-family;Georgia;}
div .center {text-align:center;background-color:whitesmoke;overflow:auto;}
.listimg {width:35%; max-width:300px;}
.font {font-weight:bold;font-style:italic;font-size:20px;}
ul{list-style-type:none;display:block;}
.main li {display:block; width:50%;float:left;margin-left:-2%;}
.main li img {display:block; width:50%;float:left;overflow:auto;}

</style>

<div class="container" id="bg">
<div class="header">
<p> <b> Become An XYZ XYZZ </b> </p>
</div> <!-- End of header -->

<div bgcolor="whitesmoke">
<div class="center">
<ul class="main">
<li>
    <img class="listimg" src="images/point1.jpg" />
    <p class="font"> Work at your time </p>
</li>
<li>
    <img class="listimg" src="images/money grows.jpg" />
    <p class="font"> Get Gratuity & other Benefits</p>
</li>
<li>
    <img class="listimg" src="images/money grows.jpg" />
    <p class="font"> Mediclaim upto Rs. 1 Lac</p>
</li>
<li>
    <img class="listimg" src="images/money grows.jpg" />
    <p class="font"> Housing Loan as low as 5-7.5%</p>
</li>
<li>
    <img class="listimg" src="images/money grows.jpg" />
    <p class="font">International recognition</p>
</li>

</ul>
</div> <!-- End of center -->
</div> <!-- End of container -->
</div>

Answer 1

如果您没有使用任何响应式框架，那么您必须编写媒体查询来告诉浏览器如何使用不同的浏览器宽度呈现网站。

例如，在您的情况下，如果您想在浏览器宽度小于600px时将其设为单列布局，则可以将其与css一起使用。

@media (max-width: 600px) {
      .main li {
            display: block;
            width: 100%;
            float: left;
            margin-left: -2%;
        }
    }

您可以在此处阅读有关媒体查询的更多信息https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en

否则使用像Bootstrap http://getbootstrap.com/

这样的框架

我试图制作一个简单的响应页面，但不明白是什么阻止我这样做

1 个答案: