前端響應式設計中@media等的相關運用

 

如今作前端響應式網站特別，響應式成爲如今前端設計一個熱點，它成爲熱點的最主要的緣由就是，移動端設備屏幕的種類多樣，那麼如何設置響應式屏幕。

/*打印樣式*/

@mediaprint{color:red;}

/*手機等小屏幕手持設備*/

@mediascreenand(min-width:320px)and(max-width:480px){body{background:yellow;}}

/*平板之類的寬度1024如下設備*/

@mediaonlyscreenand(min-width:321px)and(max-width:1024px){body{background:blue;}}

/*PC客戶端或大屏幕設備:1028px至更大*/

@mediaonlyscreenand(min-width:1029px){body{background:green;}}

/*豎屏*/

@mediascreenand(orientation:portrait)and(max-width:720px){對應樣式}

/*橫屏*/

@mediascreenand(orientation:landscape){對應樣式}

手機、平板設備屏幕尺寸衆多，寬度不一，寫手機、平板對應css時最好用百分比寬度來自適應各類大小不一的屏幕寬度。這個百分比尺寸不算太難但也不是個過輕便的活，若是你css不熟練的話最好先別折騰這塊，把基礎練好了來。還有，用了css媒體查詢後，ie6-8載入不了樣式表，要引用個：Respond.js來讓ie6-8下正確載入css。js自行百度，處處有下載。用CSS判斷橫屏豎屏問題。

CSS代碼以下

一、

@media(orientation:portrait){}橫屏

@media(orientation:landscape){}豎屏

二、<linkrel="stylesheet"media="alland(orientation:portrait)"href="portrait.css">橫屏

<linkrel="stylesheet"media="alland(orientation:landscape)"href="landscape.css">豎屏

用JavaScript判斷橫屏豎屏問題。JavaScript代碼以下

//判斷手機橫豎屏狀態：

functionhengshuping(){if(window.orientation==180||window.orientation==0){

alert("豎屏狀態！")}

if(window.orientation==90||window.orientation==-90)

{alert("橫屏狀態！")}

}

window.addEventListener("onorientationchange"inwindow?"orientationchange":"resize",hengshuping,false);

//移動端的瀏覽器通常都支持window.orientation這個參數，經過這個參數能夠判斷出手機是處在橫屏仍是豎屏狀態。

從而根據實際需求而執行相應的程序。經過添加監聽事件onorientationchange，進行執行就能夠了。

/*media*/

/*橫屏*/

@mediascreenand(orientation:landscape){

}

/*豎屏*/

@mediascreenand(orientation:portrait){

}

/*窗口寬度<960,設計寬度=768*/

@mediascreenand(max-width:959px){}

/*窗口寬度<768,設計寬度=640*/

@mediascreenand(max-width:767px){}

/*窗口寬度<640,設計寬度=480*/

@mediascreenand(max-width:639px){}

/*窗口寬度<480,設計寬度=320*/

@mediascreenand(max-width:479px){}

/*windowsUI貼靠*/

@mediascreenand(-ms-view-state:snapped){}

/*打印*/

@mediaprint{}

 

如下內容已過濾百度推廣
media screen 百度翻譯|百度詞典
Web 開發技巧: 使用 CSS @media 規則 2007年10月8日 - 什麼時候定義 screen 媒體類型css @media 規則很是適合於將 html 或 xml 文檔定位爲目標輸出方法。目前,print 媒體的使用很是廣泛,與實現單獨的 「可打印版本」 相比,...  普通
運用@media實現網頁自適應中的幾個關鍵分辨率_百度經驗 2014年12月18日 - 常常爲不一樣分辨率設備或不一樣窗口大小下佈局錯位而頭疼,能夠利用@media screen實現網頁佈局的自適應,可是怎樣兼容全部主流設備就成了問題。到底分辨率...  普通
實例講解@media與@media screen的區別 - 網站運營_卡卡網 2015年9月6日 - 在網站自適應設計中,@media與@media screen是必須用到的css代碼,可能你們對此並不陌生。可是你們又知不知道@media與@media screen的區別在哪呢?在自適...  普通
利用@media screen實現網頁佈局的自適應 - 神馬和浮雲 - 博客園 2015年5月26日 - 利用@media screen實現網頁佈局的自適應 優勢:無需插件和手機主題,對移動設備友好,可以適應各類窗口大小。只需在css中添加@media screen屬性,根據瀏覽...  普通
@media screen 針對不一樣移動設備 | 前端開拓者 2016年7月21日 - @media screen針對不一樣移動設備-響應式設計 概念: device-pixel-ratio:定義輸入設備屏幕的可視寬度與可見高度比率。 device-width:輸入設備屏幕的可視...  普通
利用@media screen實現網頁佈局的自適應 | 小蝴蝶  2013年2月19日 - @media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} } @media screen and (min-...  普通
利用@media screen實現網頁佈局的自適應,@media screen and_div+... 2014年3月11日 -  意思是當屏幕的寬度大於600小於800時,應用styleb.css 另外一種方式,便是直接寫在標籤裏: @media screen and (max-width: 600px) { /*當屏幕尺寸小於600px...  普通
CSS3 @media查詢 | 菜鳥教程 css3 @media 查詢 實例 若是文檔寬度小於 300 像素則修改背景演示(background-color): @media screen and (max-width: 300px) {    body {...  普通
利用@media screen實現網頁佈局的自適應 - 博客頻道 - CSDN.NET @media screen and (max-width: 960px){ body{ background: #000; } } 這個應該算是一個media的一個標準寫法,上面這段css代碼意思是:當頁面小於960px的時候...  普通