关于响应式布局的总结

今天在改写前面的一个页面时，出现了很大的问题，首先，我发现做响应式网页的时候如果不是很熟悉，最好还是一步一步来，之所以这么说是因为我在做这个网页的时候，是先把页面写出来，再打算写响应式布局，但是现在回过头来看，这样对于我这样刚刚开始写的人来说，是不太明智的！今天我就遇到了这样的问题。这个网页时前几天已经写好的，但是没有写响应式布局，今天把小组项目做完了，开始改这个页面，但是在改的过程中出现了不适配屏幕的情况，后来慢慢改，倒也出来了一部分，但是还是有很大的问题，比如：两张并排的图片各占50%当进行适配的时候却只出现一张图片，改了很久还是没能解决。

再一个问题，代码如下：

 <ul class="list-ul">
                <li>
                    <div class="list-item">
                        <div class="pic">
                            <img src="image/tmp/pic_list.jpg" width="130" height="110">
                        </div>
                        <div class="info">
                            <h2 class="h2_ta">好莱斯登锦华店</h2>
                            <p class="dec">满1000元打5折</p>
                            <p class="dec">建设北路三段11号附8-9</p>
                            <p class="dec">距离:100米
                                <button class="btn_1 nuse">免费领取</button>
                            </p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-item">
                        <div class="pic">
                            <img src="image/tmp/pic_list.jpg" width="130" height="110">
                        </div>
                        <div class="info">
                            <h2 class="h2_ta">好莱斯登锦华店</h2>
                            <p class="dec">满1000元打5折</p>
                            <p class="dec">建设北路三段11号附8-9</p>
                            <p class="dec">距离:100米
                                <button class="btn_1 red">$300000</button>
                            </p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-item">
                        <div class="pic">
                            <img src="image/tmp/pic_list.jpg" width="130" height="110">
                        </div>
                        <div class="info">
                            <h2 class="h2_ta">好莱斯登锦华店</h2>
                            <p class="dec">满1000元打5折</p>
                            <p class="dec">建设北路三段11号附8-9</p>
                            <p class="dec">距离:100米
                                <button class="btn_1 huise">已经领取</button>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>

页面效果如下： 效果是把那几个btn按钮再向右移，但是，移不过去了，就算是移过去了在写响应式的时候几个btn按钮会把页面撑开，导致下面出现滚动条。

所以这个时候就突出了对于不熟悉的人来说最好是边写页面边写响应式，这样后面才不会乱。