响应式网页怎么做啊(如何写出一个PC手机平板各

设计图分为版心一般为：

1600/1520/1440/1400/1200px

极简PC移动响应式网站

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，不要让宽度顶边