當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

响应式原理

發布時間：2024/2/28 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了响应式原理小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

響應式的特點

網頁的寬度自動調整

盡量少用絕對寬度

字體要用相對單位rem、em

布局使用浮動、彈性布局

規則

@chartset 定義編碼

@import 引入css文件（css模塊化）

@font-face 自定義字體

@keyframes 定義animation動畫里的關鍵幀

@media 媒體查詢

媒體查詢

1.媒體類型

all —— 所有設備

print —— 打印機設備

screen —— 彩色的電腦屏幕

speech —— 聽覺設備，可以把頁面的內容以語音的方式呈現的設備

已廢棄設備：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>

【結果】在電腦中顯示如下

?在打印機顯示如下

2.媒體特性

width

min-width 最小寬度，當屏幕寬度大于該值時，使用該樣式

max-width 最大寬度，當屏幕寬度小于該值時，使用該樣式

height

min-height 最小高度，當屏幕高度大于該值時，使用該樣式

max-height 最大高度，當屏幕高度小于該值時，使用該樣式

orientation 方向

landscape 橫屏（寬度大于高度）

portrait 豎屏（高度大于寬度）

aspect-ratio 寬度比

-webkit-device-pixel-ratio 像素比（wibkit內核的私有屬性）

【舉例】

<!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>

【結果】

當屏幕大于等于400px時，背景顏色為#f88(桃粉色)

當屏幕寬度小于等于300px時，背景顏色為#88f

當屏幕寬度間與300px和400px中間時，其樣式為默認樣式

【注】若max-width與min-width的臨界值相同，則在臨界值這一點，使用的是后面的樣式，即后面的代碼覆蓋前面的代碼

3.邏輯運算符

and? ? ? 合并多個媒體查詢（與）

，? ? ? ?? 匹配某個媒體查詢（或）

not? ? ? ?對媒體查詢結果取反

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>

【結果】

當屏幕寬度大于300px時，使用該樣式

總結

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

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

原理