media的数值排序问题

开发工具与关键技术：DW与css
作者：陈锦通
撰写时间：2019年1月16日星期三

media的意思让你在宽度不一的浏览器是显示不同的效果，从而达到你想要的效果。
screen是代表电脑显示器（注：这个意思是W3school里的）
下面说的是min的
min是浏览器窗口宽度大于多少px

/*---------------------不同的浏览器宽度----------------*/

@media screen and (min-width:800px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -678px -198px;
	}
}
@media screen and (min-width:1200px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -380px -198px;
	}
}
@media screen and (min-width:1000px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -546px -198px;
	}
}
@media screen and (min-width:1300px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -385px -198px;
	}
}
@media screen and (min-width:1400px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -201px -198px;
	}
}
@media screen and (min-width:1450px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -152px -198px;
	}
}

上面代码执行的效果如下图:

上图的右下角的截图（问题所在点）

我的解决办法如下：
我把数值从小到大排序后

@media screen and (min-width:800px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -678px -198px;
	}
}
@media screen and (min-width:1000px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -546px -198px;
	}
}
@media screen and (min-width:1200px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -380px -198px;
	}
}
@media screen and (min-width:1300px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -385px -198px;
	}
}
@media screen and (min-width:1400px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -201px -198px;
	}
}
@media screen and (min-width:1450px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -152px -198px;
	}
}

上面代码执行的效果如下图：

上图的右下角的截图（解决问题所在点）

由上面的问题我发现了一个结果：
使用min时把宽度小的放在宽度大的下面。这样就不会出现上面的那些情况。

下面是max的
max是浏览器窗口宽度小于多少px

@media screen and (max-width:1400px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -282px -198px;
	}
}
@media screen and (max-width:1200px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -490px -198px;
	}
}
@media screen and (max-width:800px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -907px -198px;
	}
	.on a{
		padding-left: 16px;
	}
}
@media screen and (max-width:1000px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -674px -198px;
	}
}

上面执行代码的后出现的问题如下：

我的解决办法如下：
我把数值从大到小排序后

@media screen and (max-width:1400px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -282px -198px;
	}
}
@media screen and (max-width:1200px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -490px -198px;
	}
}
@media screen and (max-width:1000px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -674px -198px;
	}
}
@media screen and (max-width:800px){
	.to{
		background: url(../tp/tp1/6d7aa8176c9d8c603749748fd66fd80a.jpeg) -907px -198px;
	}
	.on a{
		padding-left: 16px;
	}
}

结果如下：

由上面的错误的解决方法，得出
要是使用max时把（max-width）小的放到下面，大的放上面。不然显示不出你要的效果。要是使用min时把（min-width）小的放到上面，大的放下面。不然显示不出你要的效果。