网站如何改成自适应的？

Question

我的网站在不同电脑屏幕上打开，很多时候都无加载网站全部，在尺寸大的屏幕上可以显示全部，在尺寸比较小的网站上，就无法加载全部了，很多图片都是显示错乱，估计是没有自适应。那么如何把网站改成自适应的呢？这是我的网站，大家帮忙看看，谢谢了，www.nydsscc.com。

Answer 1

首先你要定义布局容器，在不同尺寸展示不同的大小。如：

//  布局容器
.container
  padding-right: 5px
  padding-left: 5px
  margin-right: auto
  margin-left: auto

@media only screen and (max-width: 768px)
  .container
    width: 100%

@media only screen and (min-width: 769px)
  .container
    width: 750px

@media only screen and (min-width: 992px)
  .container
    width: 970px

@media only screen and (min-width: 1200px)
  .container
    width: 1170px