媒體查詢（@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" />我感覺會更好

pc端響應式-媒體查詢