响应式布局

我是逆战班的一名学员，今天我给大家分享的是响应式布局，响应式布局就是用一套代码去适应不同的设备，让代码可以运行在pc端，也可容易运行在移动端。他有一个缺点就是不适用于中大型设备，更适用于小网站、个人博客或者产品介绍页。

实现响应式有两种方法：

一、先适配手机端 然后过渡到pad 然后过渡到pc端（不是很推荐。）

二、先适配pc端 然后过渡到pad 然后过渡到手机端（更推荐这种方法。）

1、/*针对pc端*/

100行

/*针对pad pro*/

@media all and（max-width:1024px){

50行css

}

/*针对pad mini和mobile横屏*/

@media all and（max-width:768px){

50行css

}

/*针对pc端*/

@media all and（max-width:450px){

50行css

}

2、对于如果适配的响应式布局较少，则可以用另一种办法：

用link引入新的css文件

例如：