pc端响应式-媒体查询

媒体查询（@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