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

方法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,[b]#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>

<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)">