CSS3media媒體查詢器使用詳解-css教學-PHP中文網

首頁

web前端

css教學

CSS3media媒體查詢器使用詳解

黄舟

Sep 01, 2017 pm 03:06 PM

css3media

近年來隨著響應式佈局的發展，一次開發多次使用，自適應螢幕的響應式網站的需求越來越多。但怎樣使得網站能自適應螢幕呢？這裡就需要提到一個css3裡面新增的技術了-media媒體查詢器。

那麼什麼是media媒體查詢器呢？

Media媒體查詢器是CSS3新增的一個可以偵測開啟網站的終端機的螢幕解析度的技術。

Media媒體查詢器的使用方法大致如下：

#1.設定一個meta標籤如：

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

相關參數解釋：

device-width:定義輸出裝置的螢幕可見寬度。　　

　　device-height:定義輸出裝置的螢幕可見高度。

　　width = device-width#：寬度等於目前裝置的寬度。

　　initial-scale：初始的縮放比例（預設為1.0）。

　　minimum-scale：允許使用者縮放到的最小比例（預設為1.0）。

　　maximum-scale：允許使用者縮放到的最大比例（預設為1.0）。

　　user-scalable：使用者是否可以手動縮放（預設為no，因為我們不希望使用者放大縮小頁面）。

2.載入相容檔案js

為什麼載入相容檔案js呢？

因為IE8以上的核心是不相容html5以及CSS3 media的。所以需要載入兩個相容檔案使得我們的程式碼能夠實現出來。

1 <!--[if lt IE 9]>
2 <script src=" 
3      <script src=" 
4 <![endif]-->

也可以自行下載html5hiv.js和respond,js只需要在使用的時候修改對應的script裡面的src路徑就ok。

3.把IE的渲染方式調節到最高。閒在大多數的IE都是9以上的版本，這個版本的IE文檔模式不是最新的，或者說很多的小伙伴沒有註意這一點，所以可以通過下面的代碼實現保持IE的文檔模式保持最新的版本：

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

第二種方法：

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

安裝一個Google chrome frame這個Google chrome外掛。這樣可以使得所有的瀏覽器都能夠使用Webkit引擎及V8引擎進行排版及運算，如果沒有安裝這個插件的話上面的程式碼是會使得瀏覽器一最高的文檔模式展現效果。

CSS3 media的標準寫法：

例如：當頁面小於960px的時候執行它下面的CSS程式碼。

1 @media screen and (max-width: 960px){
3     body{
5         background: #000;
7      }
9 }

這段程式碼裡面有個screen，他的意思是在告知裝置在列印頁面時使用襯線字體。

CSS2 Media用法

其實不是只有CSS3才支援Media的用法，早在CSS2開始就已經支援Media，具體用法，就是在HTML頁面的head標籤中插入如下的一段程式碼：

1 <link rel="stylesheet" type="text/css" media="screen" href="style.css">

想知道現在的行動裝置是不是縱向放置的顯示屏，可以這樣寫：

1 <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

第一段的程式碼也用CSS2來實現，讓它一樣可以讓頁面寬度小於960的執行指定的樣式檔：

1 <link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

但是這個方法會增加http的造訪次數。所以用CSS3把所有的CSS寫在一起才是最ok的。

Ok，現在我們回到CSS3的media用法上面，前面講了用CSS3的寫螢幕寬度小於960px的尺寸的寫法，現在我們來寫一下等於960px的方法：

1 @media screen and （max-width-device：960px）{
2 
3 Body{
4 
5        Background：blue；
6 
7 
}
8 
9 }

寬度大於960px的寫法：

1 @media screen and(min-width:960px){
2 
        Body{
        4 
        5               Background:red;
        6 
        7 
        }
        8 
        9 
        }

前面就是常用的幾種寫法了，接下來對CSS3 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：偵測輸出的裝置是網格的還是點陣圖裝置。

最後，附上一個趣味Demo結尾：

 1 <!DOCTYPE html> 
 2 <html lang="en"> 
 3 <head> 
 4 <meta charset="utf-8" /> 
 5 <title>CSS3 media Test</title> 
 6 <meta name="author" content="LostWeapon" /> 
 7 <style> 
 8 *{ 
 9     text-align: center;
 10     font-size: 20px; 
 11 }
 12 p{
 13     font-size: 14px;
 14 }
 15 @media screen and (min-resolution: 75.5dpcm) {
 16     .normal{display:none;}
 17 }
 18 @media screen and (min-resolution: 28.3dpcm) and (max-resolution: 75.4dpcm) {
 19     .retina{display:none;}
 20 }
 21 </style>
 22 </head>
 23 <body>
 24 <p class="retina">视网膜屏</br>哎呦 不错哦，小伙子有前途！</p>
 25 <p class="normal">普通屏</br>还不快去努力学习挣钱换电脑!</br><strong>看什么看，说的就是你！</strong></p>
 26 </body>
 27 <footer>
 28     <p>
 29        Copyright &copy;2017 墨雨溪风
 30     </p>
 31 </footer>
 32 </html>

以上是CSS3media媒體查詢器使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

联想电脑checking media开不了机如何解决？Feb 12, 2024 am 08:36 AM

有用户在启动联想笔记本时，出现checkingmedia无法启动的问题，让人不知所措，那么联想电脑checkingmedia开不了机如何解决？本期教程就为大家带来联想笔记本出现checkingmedia无法启动原因及解决办法。导致原因：1、硬盘损坏：若联想笔记本存在硬盘损坏、故障的问题，会导致笔记本显示checkingmedia且开不了机。操作系统损坏：若联想笔记本的操作系统损坏，会导致笔记本显示checkingmedia且开不了机。2、重新开机，按F12进入BIOS，在“启动”项