@media 講解

2019-11-08 00:39:10

字體：大中小

供稿：網(wǎng)友

一、媒體

all 所有媒體braille 盲文觸覺設(shè)備embossed 盲文打印機(jī)PRint 手持設(shè)備projection 打印預(yù)覽screen 彩屏設(shè)備speech '聽覺'類似的媒體類型tty 不適用像素的設(shè)備tv 電視

Demo:

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<style>			#box{				width:100px;				height:100px;				background-color:red;			}			@media embossed{				/*盲文打印機(jī)是綠色*/				#box{					background-color:green;				}			}			@media tv{				/*在tv上是粉色*/				#box{					background-color:pink;				}			}			@media all{				/*在所有媒體上是紅色*/				#box{					background-color:red;				}			}		</style>	</head>	<body>		<div id="box"></div>	</body></html>
二、關(guān)鍵字
and : 連接
        @media all and (min-width:1000px)
only : 某種特定的媒體類型 
        @media only screen
not : 關(guān)鍵是用來排除某種特定的媒體類型
        @media not tv   
/*@media only 設(shè)備類型 只有在某種特定的設(shè)備上 識別*//* @media only screen{    僅僅在彩屏設(shè)備下識別    #demo{        background:blue;    }} 
*//*當(dāng)屏幕大于等于500像素的時(shí)候*//* @media all and (min-width:500px){    #demo{        background:green;    }} *//*當(dāng)屏幕小于等于500像素的時(shí)候*/@media all and (max-width:900px){    #demo{        background:yellow;    }}
三、橫屏、豎屏
提示：這只是初步的監(jiān)測，但不是最好的，后期有講解最新的
/*豎屏*/@media (orientation:portrait){    div{        background:yellow;    }}/*橫屏*/@media (orientation:landscape){    div{        background:blue;    }}
四、CSS 引入
第一種
<link rel="stylesheet" type="text/css" href="a1.css" media="all and (min-width:400px)" /><link rel="stylesheet" type="text/css" href="a2.css" media="all and (min-width:600px)" />
第二種
<style type="text/css">@import url(a1.css) (min-width:400px);@import url(a2.css) (min-width:600px);
</style>