媒體查詢(@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" target="_blank" rel="external nofollow" />
3、ie8相容
對 ie低版本情況下不支援css3,這就是讓前端頭疼的事,但是不用急,有辦法;
在頁面<head></head>之間寫下面這段代碼
<!-- 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