# 2.響應式原理 - 響應式具有的特點 1.網頁寬度自動調整 2.儘量少用絕對寬度 3.字體要使用rem、em作為單位 4.佈局要使用浮動或者彈性佈局 響應式下任何東西都要隨著屏幕的尺寸改變而改變不能使用絕對大小 - 媒體查詢 根據一個或多個基於設備類型、具體特點和環境來應用樣式 @media @ ...
# 2.響應式原理 - 響應式具有的特點 1.網頁寬度自動調整 2.儘量少用絕對寬度 3.字體要使用rem、em作為單位 4.佈局要使用浮動或者彈性佈局 響應式下任何東西都要隨著屏幕的尺寸改變而改變不能使用絕對大小 - 媒體查詢 根據一個或多個基於設備類型、具體特點和環境來應用樣式 @media @規則 @chartset 定義編碼 @import 引入css文件（css模塊化） @font-face 自定義字體 @keyframes animation里的關鍵幀 @media 媒體查詢 ```html 媒體查詢使用方式一： <style> @media all{ div{ font-size:3rem; } } </style> 媒體查詢使用方式二： <style> @import url("css/bottstrap.css")(min-width:200px); </style> 媒體查詢使用方式三： <link rel="stylesheet" href="css/bootstrap.css" media="all"> ``` - 媒體查詢介紹 1.媒體類型 all 所有設備 print 印表機設備 screen 彩色的電腦屏幕 speech 聽覺設備（針對有視力障礙的人士，可以把頁面的內容以語音的方式呈現的設備） 註意：tty、tv、projection、braille、embossed、aural等幾種類型在媒體查詢4中已經廢棄 ```html <style> div{ width:200px; height:200px; background:green; } @media print{ div{ font-size:80px; } } @media screen{ div{ width:300px; height:300px; background:pink; } } @media all{ div{ width:400px; height:400px; background:grey; } } </style> <div>媒體類型</div> ``` 2.媒體特性 width 寬度 min-width 最小的寬度，寬度只能比這個大 max-width 最大的寬度，寬度只能比這個小 height 高度 min-height 最小的高度，高度只能比這個大 max-height 最大的高度，高度只能比這個小 orientation 屏幕方向 landscape 橫屏（寬度大於高度） portrait 豎屏（高度大於寬度） aspect-ratio 寬高比 -webkit-device-pixel-ratio 像素比（webkit內核的私有屬性） ```html <style> div{ width:200px; height:200px; background:red; } /*屏幕尺寸大於500的時候滿足*/ @media (min-width:500px){ div{ background:green; } } /*屏幕尺寸小於400的時候滿足*/ @media (max-width:400px){ div{ background:blue; } } /*橫屏的時候滿足*/ @media (orientation:landscape){ div{ width:400px; height:100px; } } /*豎屏的時候滿足*/ @media (orientation:portrait){ div{ width:100px; height:400px; } } /*寬高比為4:3的時候滿足*/ @media (aspect-ratio:4/3){ div{ border:10px solid #000; } } /*像素比為2的時候滿足*/ @media (-webkit-device-pixel-ratio:2){ div::after{ content:'hello world'; font-size:50px; } } </style> <div>媒體特性</div> ``` 3.邏輯運算符 用來做條件判斷 and 合併多個媒體類型（並且的意思） , 匹配某個媒體查詢的（或者的意思） not 對媒體查詢取反 only 僅在媒體查詢匹配成功後應用樣式（防範老舊瀏覽器） ```html <style> div{ width:200px; height:200px; background:red; } /*所有設備 && 屏幕尺寸大於500 && 橫屏的時候 滿足*/ @media all and (min-width:500px) and (orientation:landscape){ div{ background:green; } } /*屏幕尺寸大於500 || 橫屏的時候 滿足*/ @media (min-width:500px),(orientation:landscape){ div{ background:pink; } } /*（除了所有設備下屏幕小於800）=== （所有設備下屏幕大於800）的時候滿足*/ @media not all and (max-width:800px){ div{ background:blue; } } /*老舊瀏覽器不認識@media時候，不會解析裡面的css樣式*/ @media only screen and (min-width:1000px){ div{ background:grey; } } </style> <div>邏輯運算符</div> ``` 媒體查詢參考：https://drafts.csswg.org/mediaqueries/ 以上是markdown格式的筆記
