css3響應式布局教程

響應式布局

一個網站能夠兼容多個終端，並且在各個終端都可以很好展示體驗。

 

媒體類型

在何種設備或者軟件上將頁面打開

all：所有媒體
braille：盲文觸覺設備
embossed：盲文打印機
print：手持設備 projection：打印機預覽 screen：彩屏設備 speech：'聽覺'類似的媒體類型 tty：不適用像素的設備 tv：電視

css:

#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：連接媒體類型和媒體特性

@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; } }

豎屏/橫屏檢測的原理是通過可視區的寬度和高度之間的比例進行檢測的。但在移動端中可能會出現問題，比如點擊一個文本輸入框的時候，會彈出鍵盤，這個鍵盤會影響屏幕可是區域的寬高，這種情況會造成豎屏/橫屏檢測錯誤。

 

樣式引入方式

樣式表末尾添加

@media all and (min-width:600px){ }

 

link標簽

<link rel='stylesheet' href='css/01.css' media='all and (min-width:600px)' />

 

寫在樣式表頭部

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

電腦刺綉綉花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com

常用的幾種屏幕寬度設定：

@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; }