写网页及响应式

设计图分为版心一般为：

1600/1520/1440/1400/1200px

pc正常写（一般是在1920px的屏幕），版心w写最大宽度为当前设计图版心的宽度，注意不是宽度，而是最大宽度。最大宽度的意思是，当屏幕大于最大宽度时，网页就不会再随着屏幕拉升变大了，这就实现了版心的作用例如：1600px版心的设计图：

   .w { max-width:1600px; margin:0  auto;}

在1600的版心：

1600px以上不用管
1600px一下

最大1600px—–版心改成1400 ———- 1600px以下

最大1400px—–版心改成1200 ———- 1400px以下

最大1200px—–版心改成1000 ———- 1200px以下

最大1000px—–版心改成100%，页面适当加padding  ———- 

1000px以下（就是手机端了，不写768px，直接1000以下都显示手机端的样式）
这样的分档，其实就把版心以下分为了4个屏幕显示，每一个都是衔接的，这样就不会出现某一个尺寸没有考虑进去的情况。

例：

@media screen and ( max-width:1600px )
{
   .w { max-width:1400px; }
}

@media screen and ( max-width:1400px )
{
   .w { max-width:1200px; }
}

@media screen and ( max-width:1200px )
{
   .w { max-width:1000px; }
}

@media screen and ( max-width:1000px )
{
   .w { max-width: 100%;  }
}

在1520的版心：

1520px以上不用管
1520以下同上

在1440版心：

1440以上不用管
1440px以下

最大1440px—–版心改成1200

最大1200px—–版心改成1000

最大1000px—–版心改成100%，页面适当加padding，不要让宽度顶边

版心1400同上

在1200的版心：
1200px以上不用管
1200px以下

最大1200px—–版心改成1000

最大1000px—–版心改成100%，适当加padding，不要让宽度顶边