响应式布局三种实现方案汇总

方法1：

/*当你的屏幕大于1224px时采用这个样式  一行8列*/@media all and (min-width: 1224px) {    #div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8{        float: left;        width: 12.5%;    }}/*当屏幕宽度大于968px的时候采用该样式  2行4列大小范围一定要明确指定不然样式可能会被覆盖*/@media all and (min-width: 968px) and (max-width: 1224px){    #div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8{        float: right;        width: 25%;    }}/*当屏幕宽度大于320px的时候采用该样式  4行2列*/@media all  and (min-width: 380px) and (max-width: 968px){    #div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8{        float: right;        width: 50%;    }}@media all and (max-width: 380px){    #div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8{        float: left;        width: 100%;    }}

方法2：

<style>    /*注意引入外部样式后不能再在style里面添加其他样式了，对比script标签对比记忆*/    @import "../../../css/css0.css";    @import "../../../css/css1.css" all and (min-width: 1024px);    @import "../../../css/css2.css" all and (min-width: 768px) and (max-width: 1024px);    @import "../../../css/css3.css" all and (min-width: 320px) and (max-width: 768px);</style>
方法3：

<link rel="stylesheet" href="../../../css/css0.css"><link rel="stylesheet" href="../../../css/css1.css" media="all and (min-width:1024px)"><link rel="stylesheet" href="../../../css/css2.css" media="all and (min-width:768px) and (max-width:1024px)"><link rel="stylesheet" href="../../../css/css3.css" media="all and (max-width:768px)">