响应式网站目的是为了在各类屏幕上都能友好的进行展示，有比较好的客户体验。

上面是我制作的网页的top部分的   banner不是使用的是bootstrap的carousel，直接copy的。

上面的我是根据不同的屏幕大小进行不同的设置      断点分别是  1200   992    768   568   480  360  320  这几个，当然有些就没写？

调整是通过google浏览器   f12试调，调整宽度看看哪些地方跟着感觉走，给调整下css，这就完了。

问题1：

   我是应该根据不同屏幕尺寸的width区间设定引入不同的css，通过 @media only screen and (min-width:) and (max-width)来做

还是只引入一个css，通过媒体查询  层叠样式    

      @media only screen and (max-width:3600px){}

      @media only screen and(max-width:1200px){}

 通过这个不断的叠加css覆盖来做，

感觉第一种比较好，但是第一种我试过，似乎所有的css文件都被加载了，第二种我一直在用，但是感觉这样会不会增加css重排的时间？

问题2：

如果是根据我上面的流程去做响应式网页，那么美工该如何出效果图，根据pc，平板，爪机出三个效果图？会不会出现部分屏幕尺寸无法兼顾到显示效果不佳的情况？比如：我设置的图片展示  在568上面 padding:15px刚刚好，看着还不错  但是到了480上面就变的宽了，该怎么办才能避免这样的效果？

问题3：

我现在是根据设置的断点从大屏幕到小屏幕去做，但问题是工作量太大了，尤其是图片的处理上面，为了达到一个好的显示效果，基本上是在何为的宽度的时候都加有断点更改css的样式，以达到一个好的显示效果，但问题是这样写感觉能把自己累成死狗，还不一定能搞完，有没有什么简便的方法来做？