2019獨角獸企業重金招聘Python工程師標準>>>

1、在 html 標簽中

<link rel="stylesheet" type="text/css" href="style1.css" media="screen and (min-width: 600px) and (max-width: 800px)">

2、在樣式表中

@media screen and (min-width: 600px) and (max-width: 800px) { /*當屏幕尺寸大于600，小于800px時，應用下面的CSS樣式*/
.class {
????......
}}

以上 and 為關鍵字，另外其他關鍵字還包括 not(排除某種設備)，only(限定某種設備)等。

not: not是用來排除掉某些特定的設備的，比如 @media not print（非打印設備）

only: 用來定某種特別的媒體類型

all : 所有設備，這個應該經常看到

aural :?聽覺設備

braille :?點字觸覺設備

handled?:?便攜設備，如手機、平板電腦

print?:?打印預覽圖等

projection :?投影設備

screen?:?顯示器、筆記本、移動端等設備

tty :?如打字機或終端等設備

tv :?電視機等設備類型

embossed :?盲文打印機

轉載于:https://my.oschina.net/jack088/blog/408466

總結

以上是生活随笔為你收集整理的css @media 响应式布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。