link标签引入.css文件（目的）：适配不同屏幕

link标签引入.css文件（目的）：适配不同屏幕

本文 · 参考博客：https://blog.csdn.net/nianzhi1202/article/details/52464078
附 · 参考博客2：@media 、 屏幕分辨率对比

---

如下：
当只使用min_width或则max_width时；我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面，顺序不能混淆。例如：

	@media (min-width: 768px){ //>=768的设备 }
	@media (min-width: 992px){ //>=992的设备 }
	@media (min-width: 1200){ //>=1200的设备 }
	

当然在很多情况下都是混合使用；例如

	@media screen and (min-width: 960px) and (max-width: 1199px) { 
		#page{ width: 960px; }
		#content,.div1{width: 650px;}
		#secondary{width:250px}
		select{max-width:200px}
	 }

还有一种方法是我不常使用的：

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px) and (max-width: 800px)">

---

意思是当屏幕的宽度大于600小于800时，应用style.css文件设置样式

---

以上就是关于 “ link标签引入.css文件（目的）：适配不同屏幕 ” 全部内容。