回應式布局
一個網站能夠兼容多個終端，并且在各個終端都可以很好展示體驗，
媒體型別
在何種設備或者軟體上將頁面打開
|
1 2 3 4 5 6 7 8 9 |
all：所有媒體 braille：盲文觸覺設備 embossed：盲文列印機 print：手持設備 projection：列印機預覽 screen：彩屏設備 speech：'聽覺'類似的媒體型別 tty：不適用像素的設備 tv：電視 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#box{width:100px;height:100px;background-color:red;} @media embossed{ /*盲文列印機是綠色*/ #box{background-color:green;} } @media tv{ /*在tv上是粉色*/ #box{background-color:pink;} } @media all{ /*在所有媒體上是紅色*/ #box{background-color:red;} } |
關鍵字
and：連接媒體型別和媒體特性
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@media all and (min-width:1201){ } not：關鍵字是用來排除某種制定的媒體型別 @media not tv only：只有在特定的某種設備上識別 @media only tv 媒體特性 min-width：當螢屏大小 大于等于 某個值的時候識別 max-width：當螢屏大小 小于等于 某個值的時候識別 orientation：橫豎屏（portrait/landscape） @media (orientation:portrait) { //豎屏的時候 div{ background-color: yellow; } } @media (orientation:landscape) { //橫屏的時候 div{ background-color: green; } } |
豎屏/橫屏檢測的原理是通過可視區的寬度和高度之間的比例進行檢測的，但在移動端中可能會出現問題，比如點擊一個文本輸入框的時候，會彈出鍵盤，這個鍵盤會影響螢屏可是區域的寬高，這種情況會造成豎屏/橫屏檢測錯誤，
樣式引入方式
樣式表末尾添加
| 1 | @media all and (min-width:600px){ } |
link標簽
| 1 | <link rel='stylesheet' href='css/01.css' media='all and (min-width:600px)' /> |
寫在樣式表頭部
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> @import url(01.css) (min-width:400px); @import url(02.css) (min-width:600px); @import url(03.css) (min-width:800px); @import url(04.css) (min-width:1000px); body{ margin: 0; } div{ height: 100px; background-color: #f00; border: 1px solid #000; box-sizing: border-box; float: left; } </style> |
https://www.w3.org/2010/05/video/mediaevents.html
常用的幾種螢屏寬度設定：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@media screen and (min-width: 1200px) { css-code; } @media screen and(min-width: 960px) and (max-width: 1199px) { css-code; } @media screen and(min-width: 768px) and (max-width: 959px) { css-code; } @media screen and(min-width: 480px) and (max-width: 767px) { css-code; } @media screen and (max-width: 479px) { css-code; } |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/108271.html
標籤：Html/Css
上一篇：案例——文字折疊效果
下一篇：js確定取消—js確定取消判斷