前端学习的小笔记——CSS

一、适配多分辨率的css

通过判断当前浏览器尺寸加载不同的css文件

<link rel="stylesheet"  href="css_x1200/login_css_x1200.css" />
<link rel="stylesheet" media="screen and (max-width: 1200px)" href="css_x1200/login_css_x1200.css" />
<link rel="stylesheet" media="screen and (max-width: 960px)" href="css_x960/login_css_x960.css" />
<link rel="stylesheet" media="screen and (max-width: 768px)" href="css_x768/login_css_x768.css" />
<link rel="stylesheet" media="screen and (max-width: 480px)" href="css_x480/login_css_x480.css" />

无限定条件的css加载文件必须放在有限定条件的加载文件前面，不然页面加载会先加载限定条件的css文件。

判断分辨率的css文件需要按width或者height从大到小依次往下排，页面加载的时候会根据顺序从下往上判断，例如：

选择条件是max-width，则是判断宽度在max-width以下的页面，如果1200px的css文件放在480px文件的后面，页面就不会去加载480px的文件了；

同理min-width是判断在min-width以上的页面，小分辨率的css文件不能放在大分辨率文件后面。