CSS的@media属性根据不同屏幕宽度链接不同css文件的问题

Question

为什么这样设置最后页面都加载的是最后一个CSS文件，不会根据屏幕不同宽度改变CSS文件

怎么设置区间啊，比如0~1000一个CSS文件，1000~1500一个CSS文件，1500~1600一个CSS文件

Answer 1

顺序颠倒过来就行了，先写宽度小的，再写大的，或者把min换成max就行

你现在用min-width，假设屏幕宽度1920px
按照你现在的写法 既符合min-width: 1550px 也符合后面两个 最小的min-width: 768px 也生效，所以三个文件都会加载，只不过最后一个CSS的规则会覆盖前面两个

Answer 2

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">

Answer 3

 <link rel="stylesheet" media="screen and (max-width: 600px)" href="???.css" /> 这样？