响应式原理
響應式的特點
規(guī)則
媒體查詢
1.媒體類型
all —— 所有設備
print —— 打印機設備
screen —— 彩色的電腦屏幕
speech —— 聽覺設備，可以把頁面的內(nèi)容以語音的方式呈現(xiàn)的設備
已廢棄設備：tty、tv、projection、handled、braille、embossed、aural
【舉例】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;line-height: 100px;text-align: center;border: 1px solid #000;}@media all {div {background-color: #f99;}}@media print {div {width: 200px;}}@media screen {div {color: #fff;}}</style> </head> <body><div>桃花扇</div> </body> </html>【結(jié)果】在電腦中顯示如下
?在打印機顯示如下
2.媒體特性
width
min-width 最小寬度，當屏幕寬度大于該值時，使用該樣式
max-width 最大寬度，當屏幕寬度小于該值時，使用該樣式
height
min-height 最小高度，當屏幕高度大于該值時，使用該樣式
max-height 最大高度，當屏幕高度小于該值時，使用該樣式
orientation 方向
landscape 橫屏（寬度大于高度）
portrait 豎屏（高度大于寬度）
aspect-ratio 寬度比
-webkit-device-pixel-ratio 像素比（wibkit內(nèi)核的私有屬性）
【舉例】
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;line-height: 100px;text-align: center;border: 1px solid #000;}@media (min-width: 400px) {div {background-color: #f88;}}@media(max-width:300px) {div {background-color: #88f;}}</style> </head> <body><div>桃花扇</div> </body> </html>【結(jié)果】
當屏幕大于等于400px時，背景顏色為#f88(桃粉色)
當屏幕寬度小于等于300px時，背景顏色為#88f
當屏幕寬度間與300px和400px中間時，其樣式為默認樣式
【注】若max-width與min-width的臨界值相同，則在臨界值這一點，使用的是后面的樣式，即后面的代碼覆蓋前面的代碼
3.邏輯運算符
and? ? ? 合并多個媒體查詢（與）
，? ? ? ?? 匹配某個媒體查詢（或）
not? ? ? ?對媒體查詢結(jié)果取反
only? ?? 僅在媒體查詢成功后應用樣式（防范老舊瀏覽器）
【舉例】not
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;line-height: 100px;text-align: center;border: 1px solid #000;}@media not all and (max-width:300px) {div {background-color: #f88;}}</style> </head> <body><div>桃花扇</div> </body> </html>【結(jié)果】
當屏幕寬度大于300px時，使用該樣式
?
總結(jié)
- 上一篇： Bootstrap的下载和使用
- 下一篇： 前端面试分享：秋招总结（html和css