CSS3媒體查詢使用小結

来源:http://www.cnblogs.com/-walker/archive/2016/10/19/5976218.html
-Advertisement-
Play Games

首先我們在使用Media的時候需要先設置下麵這段代碼,來相容移動設備的展示效果: 準備工作1:設置Meta標簽 這段代碼的幾個參數解釋: width = device-width:寬度等於當前設備的寬度 initial-scale:初始的縮放比例(預設設置為1.0) minimum-scale:允許 ...


首先我們在使用Media的時候需要先設置下麵這段代碼,來相容移動設備的展示效果:

準備工作1:設置Meta標簽

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

這段代碼的幾個參數解釋:

  • width = device-width:寬度等於當前設備的寬度

  • initial-scale:初始的縮放比例(預設設置為1.0)  

  • minimum-scale:允許用戶縮放到的最小比例(預設設置為1.0)    

  • maximum-scale:允許用戶縮放到的最大比例(預設設置為1.0)   

  • user-scalable:用戶是否可以手動縮放(預設設置為no,因為我們不希望用戶放大縮小頁面) 

準備工作2:載入相容文件JS

因為IE8既不支持HTML5也不支持CSS3 Media,所以我們需要載入兩個JS文件,來保證我們的代碼實現相容效果:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

準備工作3:設置IE渲染方式預設為最高(這部分可以選擇添加也可以不添加)

現在有很多人的IE瀏覽器都升級到IE9以上了,所以這個時候就有又很多詭異的事情發生了,例如現在是IE9的瀏覽器,但是瀏覽器的文檔模式卻是IE8:

為了防止這種情況,我們需要下麵這段代碼來讓IE的文檔模式永遠都是最新的:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

還有一個更好的寫法:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

怎麼這段代碼後面加了一個chrome=1,這個Google Chrome Frame(谷歌內嵌瀏覽器框架GCF),如果有的用戶電腦裡面裝了這個chrome的插件,就可以讓電腦裡面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算,無比給力,不過如果用戶沒裝這個插件,那這段代碼就會讓IE以最高的文檔模式展現效果。這段代碼我還是建議你們用上,不過不用也是可以的。

進入CSS3 Media寫法:

我們先來瞅瞅下麵這段代碼,估計很多人在響應式的網站CSS很經常看到類似下麵的這段代碼

@media screen and (max-width: 960px){
    body{
        background: #ccc;
    }
}

這個應該算是一個media的一個標準寫法,上面這段CSS代碼意思是:當頁面小於960px的時候執行它下麵的CSS.這個應該沒有太大疑問。

應該有人會發現上面這段代碼裡面有個screen,他的意思是在告知設備在列印頁面時使用襯線字體,在屏幕上顯示時用無襯線字體。但是目前我發現很多網站都會直接省略screen,因為你的網站可能不需要考慮用戶去列印時,你可以直接這樣寫:

@media (max-width: 960px){
    body{
        background: #ccc;
    }
}

然後就是當瀏覽器尺寸大於960px時候的代碼了:

@media screen and (min-width:960px){
    body{
        background:orange;
    }
}

我們還可以混合使用上面的用法:

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

上面的這段代碼的意思是當頁面寬度大於960px小於1200px的時候執行下麵的CSS。

Media所有參數彙總

以上就是我們最常需要用到的媒體查詢器的三個特性,大於,等於,小於的寫法。媒體查詢器的全部功能肯定不止這三個功能,下麵是我總結的它的一些參數用法解釋:

  • width:瀏覽器可視寬度。

  • height:瀏覽器可視高度。

  • device-width:設備屏幕的寬度。

  • device-height:設備屏幕的高度。

  • orientation:檢測設備目前處於橫向還是縱向狀態。

  • aspect-ratio:檢測瀏覽器可視寬度和高度的比例。(例如:aspect-ratio:16/9)

  • device-aspect-ratio:檢測設備的寬度和高度的比例。

  • color:檢測顏色的位數。(例如:min-color:32就會檢測設備是否擁有32位顏色)

  • color-index:檢查設備顏色索引表中的顏色,他的值不能是負數。

  • monochrome:檢測單色楨緩衝區域中的每個像素的位數。(這個太高級,估計咱很少會用的到)

  • resolution:檢測屏幕或印表機的解析度。(例如:min-resolution:300dpi或min-resolution:118dpcm)。

  • grid:檢測輸出的設備是網格的還是點陣圖設備。

轉自:520UED

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於本系列文章 本系列文章總共8個章節,41篇文章,主要翻譯自官方API文檔,加上自己的一些理解撰寫而成。 區別與園子和網路上的其他一些Knockout教程,這個系列教程將由淺入深的系統的介紹Knockout的知識點和使用細節。 並且本系列KnockoutJS教程是基於最新的3.4.0版本入手的。對... ...
  • Knockout旨在允許您將任意JavaScript對象用作視圖模型。 只要一些視圖模型的屬性是observables,您可以使用KO將它們綁定到您的UI,並且UI將在可觀察屬性更改時自動更新。 大多數應用程式需要從後端伺服器獲取數據。 由於伺服器沒有任何可觀察的概念,它只提供一個純JavaScri... ...
  • 調用 localstorge、cookies 等本地存儲方式 方法一:使用localStorage 使用localStorage.setItem(key,value);添加內容 使用storage事件監聽添加、修改、刪除的動作 window.addEventListener("storage",fu ...
  • <script type="text/javascript"> window.onload = function cc() { var tr=document.getElementsByTagName("tr"); for(var i=0;i<tr.length;i++){ tr[i].style. ...
  • 我現在做的一個項目是angular,但是我用直接引用百度地圖的方法引進js,寫html,js代碼,發現,我去,報錯了,我一開始還以為是百度地圖跟angular有衝突,然後我就去搜索啊,發現angular也有一個百度地圖插件,無奈我用了報錯了,網上說要用angular2版本才能相容,但是我又不會下載2 ...
  • 我們中國嘛傳統段落就是要首行縮進兩個字,首先首行縮進的css是text-indent: 然後這個值是多少呢,一般你的字母的font-size是多少,text-indent:2*font-size的值 比如你的字的字體大小是16px,那麼你想讓段落首行縮進兩個字的話就是text-indent:2*16 ...
  • [TOC] 名詞解釋 state: 它是組件的屬性,主要用來存儲組件自身需要的數據。 虛擬DOM: 它是ReactJS中提出的一個概念,是將真實的DOM結構映射成一個JSON數據結構。 1.組件生命周期 1.創建階段 :該方法會返回一個對象,並緩存下來。然後與父組件指定的props對象合併,最後賦值 ...
  • 註意:這個速率限制API是在Knockout 3.1.0中添加的。 通常,更改的observable立即通知其訂戶,以便依賴於observable的任何計算的observable或綁定都會同步更新。 但是,rateLimit擴展器會導致observable在指定的時間段內抑制和延遲更改通知。 因此,... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...