媒体查询（@media）：能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果
列举常用的pc屏幕宽度：
1024 1280 1366 1440 1680 1920
我们可在css样式中来写，也在不同屏幕下引入相应的样式。
1、css样式
假设我们在不同屏幕下要写基础字体的变化；
@media screen and(min-width: 1024px){
body{font-size: 12px}
} /*>=1024的设备屏幕*/
@media screen and(min-width: 1100px) {
body{font-size: 14px}
} /*>=1100的设备屏幕*/
@media (min-width: 1280px) {
body{font-size: 18px;}
} /*>=1280的设备屏幕*/
@media screen and(min-width: 1366px) {
body{font-size: 20px;}
} /*>=1366的设备屏幕*/
@media screen and(min-width: 1440px) {
body{font-size: 24px !important;}
} /*>=1440的设备屏幕*/
@media screen and(min-width: 1680px) {
body{font-size: 26px;}
} /*>=1680的设备屏幕*/
@media screen and(min-width: 1920px) {
body{font-size: 30px;}
} /*>=1920的设备屏幕*/
*获许有人要问 screen 这个起什么作用？
他用于电脑屏幕，平板电脑，智能手机等。还有别的属性值，我就不多说。看菜鸟教程：http://www.runoob.com/cssref/css3-pr-mediaquery.html
2、样式引入
<link rel="stylesheet" media="(min-width:1024px) and (max-width:1366px)" href="mediaStyle.css" />
3、ie8兼容
对 ie低版本情况下不支持css3，这就是让前端头疼的事，但是不用急，有办法；
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
html5.min.js：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
respond.min.js：让IE6-IE8等其他浏览器支持媒体查询
上面的俩js我直接引的bootstrap 的cdn脚本，你们也可以下载拷贝。
最后为了减少ie低版本的出现，加上一句 <meta http-equiv ="X-UA-Compatible" content="IE=edge,chrome=1" />我感觉会更好
原文地址：https://www.cnblogs.com/shizk/p/8611534.html