androidmediaquery_Android手機js獲取屏幕尺寸不準導致計算的問題

Ⅰ android手機js獲取屏幕尺寸不準，導致計算的問題

Android中可以通過三種方式獲到屏幕大小：
1、通過WindowManager獲取
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
System.out.println("heigth : " + dm.heightPixels);
System.out.println("width : " + dm.widthPixels);

2、通過Resources獲取
DisplayMetrics dm2 = getResources().getDisplayMetrics();
System.out.println("heigth2 : " + dm2.heightPixels);
System.out.println("width2 : " + dm2.widthPixels);

3、通過Display 獲取屏幕的默認解析度
Display display = getWindowManager().getDefaultDisplay();
System.out.println("width-display :" + display.getWidth());
System.out.println("heigth-display :" + display.getHeight());

Ⅱ 怎樣低成本的實現網頁在移動端的適配

解決方案涉及到的知識點：

viewport

媒體查詢(media query)

Javascript window.matchMedia

響應式圖片

柵格布局

頂部導航

測試工具

iOS和Android自帶的瀏覽器都是基於webkit內核，所以我們可以使用viewport屬性和media
query技術實現網站的響應性。

viewport

在<head>之中添加viewport元數據標簽。

width=device-width 實現屏幕適配，頁面繪制根據觸屏大小變化，保持一致。

initial-scale 表示初始縮放。

Js代碼

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

maximum-scale 表示最大縮放比例，1意味著不能進行縮放。

user-scalable=no
禁用頁面縮放（zooming）功能。禁用縮放後，用戶只能滾動屏幕，讓你的網站看上去更像原生應用。

注意，這種方式我們並不推薦所有網站使用，還是要看你自己的情況而定！

Js代碼

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

媒體查詢(media
query)

根據不同的解析度，引用不用的css

Css代碼

<link rel="stylesheet" type="text/css"

media="screen and (max-device-width: 480px)"

href="shetland.css" />
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />

Bootstrap3的實現 http://v3.bootcss.com/css/#grid-media-queries ，

以下是LESS方法的實現

Js代碼

/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Javascript window.matchMedia

用CSS3解決的確很方便，但某些場景下仍然需要JS技術。

Js代碼

if (window.matchMedia("(min-width: 400px)").matches) {

// The screen width is 400px or wider.

} else {

// The screen width is less than 400px.

}
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}

狀態改變時監聽

Js代碼

function setup_for_width(mql) {

if (mql.matches) {

// The screen width is 400px or wider. Set up or change things

// appropriately.

} else {

// The screen width is less than 400px. Set up or change things

// appropriately.

}

}

var width_mql = window.matchMedia("(min-width: 400px)");

// Add a listener for when the result changes

width_mql.addListener(setup_for_width);

// And share the same code to set things up with our current state.

setup_for_width(width_mql);

Ⅲ 求教：移動端web頁面適配問題

之前默認使用的系統內置瀏覽器對象，去年應該已經在Android切換為第三方瀏覽器內核了。兼容性基本不用考慮，不需要考慮media
query了等等適配工作。基於參考要求，在任意一個終端上開發，在所有終端上都會有統一的展現。
基於em相對字體大小技術+屏幕DPI適配。

Ⅳ jquerymobile 怎麼關閉頁面

從本文開始，使用 jQuery Mobile 與 HTML5 開發 Web App 系列將會進入第三部分——jQuery Mobile 事件與方法，這其中將會利用之前所講述的 jQuery Mobile 組件作為例子說明，因此 Kayo 建議如果你不熟悉 jQuery Mobile ，可以首先閱讀前面兩部分的文章。本文會介紹 jQuery Mobile 的默認配置以及一些基本的事件使用方法。
一.默認配置
jQuery Mobile 會有一些默認的設置，如之前介紹過的 Ajax 導航形式，可以選擇在默認配置中關閉，這樣整個網站都會關閉 jQuery Mobile Ajax 導航。
jQuery Mobile 把所有這些配置都封裝在 $.mobile 中，作為它的屬性，因此改變這些屬性值就可以改變 jQuery Mobile 的默認配置。
當 jQuery Mobile 開始執行時，它會在 document 對象上觸發 mobileinit 事件，並且這個事件遠早於 document.ready 發生，因此開發者需要通過如下的形式重寫默認配置：

1
2
3

$(document).bind("mobileinit", function(){
// 新的配置
});

由於 mobileinit 事件會在 jQuery Mobile 執行後馬上觸發，因此開發者需要在 jQuery Mobile 載入前引入這個新的默認配置，若這些新配置保存在一個名為 custom-mobile.js 的文件中，你按如下順序引入 jQuery Mobile 的各個文件。

1
2
3

<script src="jquery.min.js"></script>
<script src="custom-mobile.js"></script>
<script src="jquery-mobile.min.js"></script>

下面以 Ajax 導航作為例子說明如何自定義 jQuery Mobile 的默認配置：
在之前的文章《使用 jQuery Mobile 與 HTML5 開發 Web App —— jQuery Mobile 頁面與對話框》中，Kayo 說明過，jQuery Mobile 是以 Ajax 的方式驅動網站（可以參加上文的第三點「Ajax 驅動的站點」），若某個鏈接不需要 Ajax ，可以為某個鏈接添加 data-ajax=」false」屬性，這是局部的設置，如果開發者需要取消默認的 Ajax 方式（即全局取消 Ajax），可以自定義默認配置：
代碼如下：

1
2
3

$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});

jQuery Mobile 是基於 jQuery 的，因此你也可以使用 jQuery 的 $.extend 擴展 $.mobile 對象，

1
2
3
4
5

$(document).bind("mobileinit", function(){
$.extend($.mobile, {
ajaxEnabled: false
});
});

使用上面的第二種方法可以很方便的自定義多個屬性，如在上例的基礎上同時設置 activeBtnClass ，即為當前頁面分配一個 class，原本的默認值為「ui-btn-active」，現在設置為「new-ui-btn-active」，可以這樣寫：

1
2
3
4
5
6

$(document).bind("mobileinit", function(){
$.extend($.mobile, {
ajaxEnabled: false,
activeBtnClass: "new-ui-btn-active"
});
});

上面的例子中介紹了簡單同時也是最基本的 jQuery Mobile 事件，它反映了 jQuery Mobile 事件需要如何使用，同時也要注意觸發事件的對象和順序。
下面列出所有的默認配置及說明。（以屬性名、值的類型、默認值的方式說明）
activeBtnClass 字元串默認值："ui-btn-active"
為激動狀態的按鈕分配 class 值。
activePageClass 字元串默認值："ui-page-active"
為當前頁面分配 class 值。
ajaxEnabled 布爾型默認值：true
控制是否禁止默認的 Ajax 鏈接點擊和表單提交，並停止 hash 的監聽，然後以常規的 HTTP 方式進行。
allowCrossDomainPages 布爾型默認值：false
設置是否允許跨域。因為 jQuery Mobile 會記錄 location hash ，這有可能會為網站帶來 cross-site scripting (XSS) 攻擊，因此該選項默認為 false 。
autoInitializePage 布爾型默認值：true
當 DOM 載入完畢後，jQuery Mobile 會自動調用 $.mobile.initializePage 方法。如果設置該屬性為 false ，則頁面不進行初始化，即頁面空白。
buttonMarkup.hoverDelay 整形默認值：200
該屬性設置觸摸觸摸某一個 jQuery Mobile 按鈕後添加 hover 和 down 的 class 的延時。該數值越小，延時越小，觸摸越靈敏，但同時很有可能錯誤的觸發頁面滾動條滾動。因此建議數值不要太小。
defaultDialogTransition 字元串默認值："pop"
設置使用 Ajax 方式的對話框的默認過場動畫。
defaultPageTransition 字元串默認值：fade
設置使用 Ajax 方式跳轉的頁面的默認過場動畫。
gradeA 布爾型默認值："true"
設置 $.support.mediaquery 的返回值，默認為符合全部 grade A 等級的移動設備的支持條件才會返回 true 。
hashListeningEnabled 布爾型默認值：true
設置是否監聽和處理 location.hash 的改變。
ignoreContentEnabled 布爾值默認值：false
把該選項設置為 true ，並且在某元素的父元素上設置 data-enhance="false" 屬性，那麼該元素會自動降低 jQuery Mobile 增強（jQuery Mobile 元素增強指的是 jQuery Mobile 對網頁基本元素在樣式上的豐富、交互上的增強以及相應的 HTML 結構改造）。
linkBindingEnabled 布爾值默認值：true
jQuery Mobile 會自動綁定錨標記到文檔中，設置該選項為 false 將阻止所有的錨點擊處理，例如取消激活按鈕狀態。一般來說只有在把錨標記處理交給另一個處理庫時才設置該屬性為 false 。
loadingMessageTextVisible 布爾值默認值：false
設置當頁面載入中的時候是否顯示提示文字。
loadingMessage 字元串默認值："loading"
設置當頁面顯示載入提示時，載入提示文字的內容。
loadingMessageTheme 字元串默認值："A"
設置當頁面顯示載入提示時，載入提示的默認主題。
minScrollBack 整形默認值：250
設置頁面最小滾動距離
NS 字元串默認：""
該屬性可以改變 jQurey Mobile 的命名空間，jQuery Mobile 按 data-NS 屬性值安排命名空間，默認為空，則直接 data-role ，舉個簡單的例子，若設置 NS 的值為 "custom" ，則此時需要定義一個 jQuery Mobile 頭部的話需要從原來的 data-role="header" 改為 data-custom-role="header" ，其他 data-role 也要改成為 data-custom-role 。這樣開發者可以創建屬於自己的命名空間，避免與 jQuery Mobile 原有的屬性發生沖突，便於製作自定義主題。
需要注意的是，當你使用了 data-命名空間後，你需要更新 jQuery Mobile css 文件的選擇器，格式如下
.ui-mobile [data-custom-role=page], .ui-mobile [data-custom-role=dialog] ......
pageLoadErrorMessage 字元串默認值："Error Loading Page"
設置當 Ajax 載入頁面錯誤時顯示的提示信息。
pageLoadErrorMessageTheme 字元串默認值："e"
設置當 Ajax 載入頁面錯誤時錯誤提示框的主題樣式。
pushStateEnabled 布爾型默認值：true
在支持的瀏覽器中開啟 history.replaceState 這個增強特性，把哈希值（hash-based）的 Ajax 請求轉化為完整的文檔路徑。jQuery Mobile 建議在關閉 Ajax 導航和大量使用外部鏈接的情況下關閉這個特性。
subPageUrlKey 字元串默認值："ui-page"
URL 參數用來指向由組件生成的子頁面(如嵌套列表頁)，該 URL 會被解釋成如 example.html&ui-page=subpageIdentifier 的形式，而在 &ui-page= 之前的哈希值會被 jQuery Mobile 向此 URL 地址做 Ajax 請求。
touchOverflowEnabled 布爾型默認值：false
設置是否使用設備的原生區域滾動特性，除了 iOS5 之外大部分的設備到目前還不支持原生的區域滾動特性，因此在 jQuery Mobile 1.1.0 中不建議修改該屬性。
二.事件基礎
通過上面的基本配置，相信大家對 jQuery Mobile 的事件也有一定了解，這里 Kayo 再正式介紹一下 jQuery Mobile 的事件。
jQuery Mobile 在基於本地事件上，創建了一系列的自定義事件，大部分事件是基於觸摸設備的使用情況開發的，當然這些事件對於桌面環境也會有適當的處理，開發者可以使用 bind() 函數綁定到需要的頁面對象中。
值得注意的是，jQuery Mobile 是基於 Ajax 導航的，所以採用 bind() 方法綁定的事件無法作用於 Ajax 產生的網頁元素中，因此建議開發者使用動態綁定的方法如 live()、delegate() 將事件動態的綁定到相應的元素中。live()、delegate() 等方法可以把 jQuery Mobile 選擇器選擇的 DOM 元素，在整個 DOM 范圍將其持久化，這就意味著，無論該元素是先前存在還是通過 Ajax 動態載入的，事件都會被綁定，如同 CSS 給元素添加樣式一樣。這在對 Ajax 有比較大依賴的網站中是必須注意的。
live()、delegate() 在實現動態綁定的原理和資源消耗方面也有很大的差別，但這並不是本文的討論范圍，Kayo 將會另寫文章敘述。
2012/11/7 更新
「剛剛在網友提醒下，了解到在 jQuery 1.7 中，引入了一個新的事件綁定函數 —— .on() ，用於代替 bind, live, delegate 。但 jQuery Mobile 文檔仍建議使用 .bind() 和 .live() 方法綁定事件，jQuery Mobile 並沒有明確其中原因，但考慮到低版本的 jQuery Mobile 只需 jQuery 1.6.4 的支持就足夠，出於兼容性的原因，當然也可能是由於考慮到開發者的習慣，jQuery Mobile 才作出以上建議。當然如果開發者熟悉 .on() 方法也不妨採用 .on() 進行事件綁定。」
下面以其中的 live() 方法舉一個例子說明如何動態綁定 jQuery Mobile 事件。

1
2
3
4
5

$(function(){
$("body").live('swiperight', function() {
$('#next').click(); // #next 為下一頁的鏈接的 id
});
});

說明：上面的例子中，假設進入下一頁的鏈接的 id 為 next 。那麼在頁面上向右滑動就會觸發點擊了下一頁的鏈接，從而進入下一頁。可以想像，這個過程是 Ajax 的，頁面會平滑的跳轉並且會有過場動畫，這樣從視覺上看，可以很好的做出原生 App 中常見的滑動翻頁功能。當然，這些是基於瀏覽器的，如果用戶的移動設備配置不高的話，會很容易造成畫面不流暢等降低用戶體驗的情況，這也是 Kayo 在前文中建議不要使用過於炫麗的過場動畫（如 3D transforms）的原因之一。
通過上面的例子，不難看出 jQuery Mobile 的強大和方便，它考慮了很多開發 Web App 需要用到的功能。至於 jQuery Mobile 的詳細事件，Kayo 將會在下文中詳細說明。
三.完整 Demo
本例子對上面提到的自定義 jQuery Mobile 默認配置和滑動事件綁定進行測試，滑動事件是為觸摸設備而設計的，因此建議你使用觸摸設備進行測試，若使用 PC 環境測試，jQuery Mobile 也會檢測滑鼠操作代替觸摸操作，具體的操作是按住滑鼠左鍵進行滑動，jQuery Mobile 的默認滑動有效距離是 30px，因此測試時只需滑動一小段距離即可觸發滑動。具體的完整代碼可以打開 Demo 後直接查看文檔的源碼。
完整 Demo（建議使用 PC 上的 Firefox、Chrome 等現代瀏覽器和 IE9+ 或 Android , iPhone/iPad 的系統瀏覽器瀏覽）

Ⅳ 支付寶個人頁是怎麼適配所有電腦的 css

你用媒介查詢
CSS3 Media Queries
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
或者這樣的形式：
<style type="text/css" media="screen"> @import url("css/style.css"); </style>
不知道大家留意沒有，其中兩種方式引入CSS樣式都有一個共同的屬性「media」，而這個「media」就是用來指定特定的媒體類型，在HTML4和CSS2中充許你使用「media」來指定特定的媒體類型，如屏幕（screen）和列印（print）的樣式表，當然還有其他的，比如說「TV」,「handheld」等，其中「all」表示的是支持所有媒體介質。有關於更多的Media類型，可以點擊這里。
上
面簡單說了一下HTML4和CSS2的「Media Queries」,而今天的主要是來學習CSS3中的"Media
Queries"的更多使用方法和相關知識，下面我們開始進入今天的主題。CSS3中的Media
Queries增加了更多的媒體查詢，同時你可以添加不同的媒體類型的表達式用來檢查媒體是否符合某些條件，如果媒體符合相應的條件，那麼就會調用對應的
樣式表。換句簡單的說，「在CSS3中我們可以設置不同類型的媒體條件，並根據對應的條件，給相應符合條件的媒體調用相對應的樣式表」。現在最常見的一個
例子，你可以同時給PC機的大屏幕和移動設備設置不同的樣式表。這功能是非常強大的，他可以讓你定製不同的解析度和設備，並在不改變內容的情況下，讓你制
作的web頁面在不同的解析度和設備下都能顯示正常，並且不會因此而丟失樣式。
首先來看一個簡單的實例：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
上面的media語句表示的是：當頁頁寬度小於或等於600px,調用small.css樣式表來渲染你的Web頁面。首先來看media的語句中包含的內容：
1、screen：這個不用說大家都知道，指的是一種媒體類型；
2、and：被稱為關鍵詞，與其相似的還有not,only，稍後會介紹；
3、（max-width:600px）：這個就是媒體特性，說得通俗一點就是媒體條件。
前面這個簡單的實例引出兩個概念性的東西，一個就是媒體類型（Media Type）和媒體特性（Media Query），首先一起來理解一下這兩個概念：
一、媒體類型(Media Type)
媒
體類型(Media
Type)在css2中是一個常見的屬性，也是一個非常有用的屬性，可以通過媒體類型對不同的設備指定不同的樣式，在css2中我們常碰到的就是
all（全部）,screen（屏幕）,print（頁面列印或打邱預覽模式）,其實在媒體類型不止這三種，w3c總共列出了10種媒體類型。
頁面中引入媒體類型方法也有多種：
1、link方法引入
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
2、xml方式引入
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
3、@import方式引入
@import
引入有兩種方式，一種是在樣式文件中通過@import調用別一個樣式文件；另一種方法是在<head></head>中
的<style>...</style>中引入，單這種使用方法在ie6-7都不被支持如
樣式文件中調用另一個樣式文件：
@import url("css/reset.css") screen; @import url("css/print.css") print;
在<head></head>中的<style>...</style>中調用：
<head> <style type="text/css"> @import url("css/style.css") all; </style> </head>
4、@media引入
這種引入方式和@import是一樣的，也有兩種方式：
樣式文件中使用：
@media screen{ 選擇器{ 屬性：屬性值； } }
在<head>>/head>中的<style>...</style>中調用：
<head> <style type="text/css"> @media screen{ 選擇器{ 屬性：屬性值； } } </style> </head>
以上幾種方法都有其各自的利弊，在實際應用中我建議使用第一種和第四種，因為這兩種方法是在項目製作中是常用的方法，對於他們的具體區別，我就不說了，想了解的大家可以去找度娘或G爸，他們能幫你解決。
二、媒體特性（Media Query）
前面有簡單的提到，Media Query是CSS3 對Media Type的增強版，其實可以將Media Query看成Media Type(判斷條件)+CSS(符合條件的樣式規則)，常用的特性w3c共列出來13種。具體的可以參閱：Media features。為了更能理解Media Query，我們在次回到前面的實例上：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
轉換成css中的寫法為：
@media screen and (max-width: 600px) { 選擇器 { 屬性：屬性值； } }
其實就是把small.css文件中的樣式放在了@media srceen and (max-width;600px){...}的大括弧之中。在語句上面的語句結構中，可以看出Media query和css的屬性集合很相似，主要區別在：
1、Media query只接受單個的邏輯表達式作為其值，或者沒有值；
2、css屬性用於聲明如何表現頁頁的信息；而Media Query是一個用於判斷輸出設備是否滿足某種條件的表達式；
3、Media Query其中的大部分接受min/max前綴，用來表示其邏輯關系，表示應用於大於等於或者小於等於某個值的情況
4、CSS屬性要求必須有屬性值，Media Query可以沒有值，因為其表達式返回的只有真或假兩種
常用的Media Query如下表所示：

兼容的瀏覽器：

下面我們一起來看看Media Queries的具體使用方式
一、最大寬度Max Width
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />
上面表示的是：當屏幕小於或等於600px時，將採用small.css樣式來渲染Web頁面。
二、最小寬度Min Width
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />
上面表示的是：當屏幕大於或等於900px時，將採用big.css樣式來渲染Web頁面。
三、多個Media Queries使用
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
Media
Query可以結合多個媒體查詢，換句話說，一個Media Query可以包含0到多個表達式，表達式又可以包含0到多個關鍵字，以及一種Media
Type。正如上面的其表示的是當屏幕在600px-900px之間時採用style.css樣式來渲染web頁面。
四、設備屏幕的輸出寬度Device Width
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
上面的代碼指的是iphone.css樣式適用於最大設備寬度為480px，比如說iPhone上的顯示，這里的max-device-width所指的是設備的實際解析度，也就是指可視面積解析度
五、iPhone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
上面的樣式是專門針對iPhone4的移動設備寫的。
六、iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />
在
大數情況下，移動設備iPad上的Safari和在iPhone上的是相同的，只是他們不同之處是iPad聲明了不同的方向，比如說上面的例子，在縱向
(portrait)時採用portrait.css來渲染頁面；在橫向（landscape）時採用landscape.css來渲染頁面。
七、android
/*240px的寬度*/ <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" /> /*360px的寬度*/ <link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" /> /*480px的寬度*/ <link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />
我們可以使用media query為android手機在不同解析度提供特定樣式，這樣就可以解決屏幕解析度的不同給android手機的頁面重構問題。
八、not關鍵字
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
not關鍵字是用來排除某種制定的媒體類型，換句話來說就是用於排除符合表達式的設備。
九、only關鍵字
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
only
用來定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實only很多時候是用來對那些不支持Media Query但卻支持Media
Type的設備隱藏樣式表的。其主要有：支持媒體特性（Media
Queries）的設備，正常調用樣式，此時就當only不存在；對於不支持媒體特性(Media Queries)但又支持媒體類型(Media
Type)的設備，這樣就會不讀了樣式，因為其先讀only而不是screen；另外不支持Media
Qqueries的瀏覽器，不論是否支持only，樣式都不會被採用。
十、其他
在Media Query中如果沒有明確指定Media Type，那麼其默認為all，如：
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
另外還有使用逗號（，）被用來表示並列或者表示或，如下
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代碼中style.css樣式被用在寬度小於或等於480px的手持設備上，或者被用於屏幕寬度大於或等於960px的設備上。
關於Media Query的使用這一節就介紹到此，最後總體規納一下其功能，個人認為就是一句話：Media Queries能在不同的條件下使用不同的樣式，使用頁面達到不同的渲染效果。下一節將會針對Media Queries介紹幾個實例，如果感興趣的朋友記得觀注本站的更新。
如需轉載煩請註明出處：W3CPLUS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@media (max-width: 1186px) {

}
@media (max-width: 979px) {
}
@media (min-width: 768px) and (max-width: 979px) {
}
@media (max-width: 767px) {
}

/* Smaller screens ----------- */
@media (max-width : 480px) {
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}

Ⅵ iphone6 media怎麼寫

iphone6及iphone6plus已經出來一段時間了。很多移動端網站，以前寫死body為320px的，現在估計也忙著做適配了。
大屏幕手機其實一直有，只是以前大家沒怎麼重視，移動端的H5頁面大部分都以320px為基準寬度進行布局，那些大屏屌絲android用戶也懶得去理，而現在iphone也搞起多屏幕，老闆們重視程度就不一樣了。
回歸正題，兼容iphone各版本機型最佳的方式就是自適應。
1、viewport簡單粗暴的方式：
<metaname="viewport"content="width=320,maximum-scale=1.3,user-scalable=no">
直接設置viewport為320px的1.3倍，將頁面放大1.3倍。
為什麼是1.3？
目前大部分頁面都是以320px為基準的布局，而iphone6的寬度比是375/320=1.171875，iphone6+則是414/320=1.29375
那麼以1.29倍也就約等於1.3了。
2、ip6+的CSSmediaquery
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
/*iphone6*/
}
@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){
/*iphone6plus*/
}
PS:也可以直接使用實際的device-width：如device-width:375px
在原有頁面的基礎上，再針對相應的屏幕大小單獨寫樣式做適配。
3、REM布局
REM是CSS3新增的一種單位，並且移動端的支持度很高，android2.x+，ios5+都支持。
REM是相對於dom結構的根元素來設置大小，也就是html這個元素。相較於em單位，rem使用上更容易理解及運用。
REM與PX的換算可以查看網址：https://offroadcode.com/prototypes/rem-calculator/
假設，html我們設置font-size:12px;也就是說12px相對於1rem，那麼18px也就是18/12=1.5rem。
那麼我們以320px的設計布局為基準，將html設置為font-size:100px，即100px=1rem。(設置100px是為了方便計算)那麼可以將大部分px單位除以100就可以直接改成rem單位了。
REM如何做響應式布局？
1、如果僅僅是適配ip6+設備，那麼使用mediaquery就行。
偽代碼如下：
/*320px布局*/
html{font-size:100px;}
body{font-size:0.14rem/*實際相當於14px*/}
/*iphone6*/
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
html{font-size:117.1875px;}
}
/*iphone6plus*/
@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){
html{font-size:129.375px;}
}
這樣，在ip6下，也就將頁面內的元素放大了1.17倍，ip6+下也就是放大了1.29倍。
2、如果是完全自適應，那麼可以通過JS來控制。
(function(doc,win){
vardocEl=doc.documentElement,
resizeEvt='orientationchange'inwindow?'orientationchange':'resize',
recalc=function(){
varclientWidth=docEl.clientWidth;
if(!clientWidth)return;
docEl.style.fontSize=100*(clientWidth/320)+'px';
};
//
if(!doc.addEventListener)return;
win.addEventListener(resizeEvt,recalc,false);
doc.addEventListener('DOMContentLoaded',recalc,false);
})(document,window);
頁面初始化的時候計算font-size，然後再綁定resize事件。這種效果就和百分比布局一樣了。
那麼用REM做單位與百分比做單位有什麼優勢？
主要優勢在於能更好的控制元素大小。（一般百分比應用在布局層，一般常見設置為50%，33.3%，25%之類的整數居多，難以運用在復雜的頁面小部件內）。
但是相比百分比布局，需要藉助JS或mediaquery實現，略有一點瑕疵。
DEMO地址
4、圖片自適應
剛說完REM布局，那麼用百分比布局也能實現一樣的效果，但是用百分比布局，必須要面臨一個問題：圖片寬度100%，頁面載入時會存在高度塌陷的問題。.
那麼可以用padding-top設置百分比值來實現自適應。
公式如下：
padding-top=(ImageHeight/ImageWidth)*100%
原理：padding-top值為百分比時，取值是是相對於寬度的。
相關代碼實現：
<divclass="cover">
<imgsrc="http://g.ald.alicdn.com/bao/uploaded/i1/TB1d6QqGpXXXXbKXXXXXXXXXXXX_!!0-item_pic.jpg_160x160q90.jpg"alt=""/>
</div>
.cover{position:relative;padding-top:100%;height:0;overflow:hidden;}
.coverimg{position:absolute;top:0;width:100%;}
DEMO地址，縮放瀏覽器窗口看看。
5、圖片高清化
大家都知道，iphone6plus是3倍高清圖了，它的devicePixelRatio=3。
在ios8下，已經開始支持img的srcset屬性了（目前移動端也就ios8開始支持），也就是說，可以對一張圖片設置2個URL，瀏覽器自動載入對應的圖片。
黃色表示僅支持舊的srcset規范，綠色表示支持全新的srcset規范，包括sizes屬性，w描述符。這里不展開，詳細了解可自行google。
不過目前前端這邊圖片的實現基本都用lazyload的方式實現。srcset的圖片載入方式在實際項目中運用還比較少。
6、背景圖高清化
mediaquery實現高清化
img標簽的高清化，可以通過JS判斷devicePixelRatio的值來載入不同尺寸的圖片，但是對於背景圖，寫在CSS中的，用JS來判斷就略麻煩了，還好CSS通過mediaquery也能判斷dpr。
目前兼容性最好的背景圖高清化實現方式，使用mediaquery的-webkit-min-device-pixel-ratio做判斷：
/*普通顯示屏(設備像素比例小於等於1)使用1倍的圖*/
.css{
background-image:url(img_1x.png);
}
/*高清顯示屏(設備像素比例大於等於2)使用2倍圖 */
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2){
.css{
background-image:url(img_2x.png);
}
}
/*高清顯示屏(設備像素比例大於等於3)使用3倍圖 */
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:3){
.css{
background-image:url(img_3x.png);
}
}
進一步，可以通過工具生成相應的3x，2x，1x的圖片及css，在使用時直接引用即可。誰搞一個？
關於移動設備的-webkit-min-device-pixel-ratio值，可以查看該網頁的整理：http://bjango.com/articles/min-device-pixel-ratio/
image-set實現高清化
image-set，它是Webkit的私有屬性，也是Css4的一個屬性，它是為了解決Retina屏幕下的圖像顯示而生。
使用方式也很簡單。偽代碼如下：
.css{
background-image:url(1x.png); /*不支持image-set的情況下顯示*/
background:-webkit-image-set(
url(1x.png)1x,/*支持image-set的瀏覽器的[普通屏幕]下*/
url(2x.png)2x,/*支持image-set的瀏覽器的[2倍Retina屏幕]*/
url(3x.png)3x/*支持image-set的瀏覽器的[3倍Retina屏幕]*/
);
}
目前移動端的支持程度來看，ios7+，android4.4+下已經支持了。如果僅僅是做ip6+的高清適配方案。image-set也是一種實現方案。
使用image-set與mediaquery實現有什麼區別及好處？
這篇文章裡面做了很詳細的闡述，大家可以看看：http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/
大體的意思是：image-set不需要告訴瀏覽器使用什麼圖像，而是直接提供了圖像讓瀏覽器選擇。這就意味著，如果在低網速下，瀏覽器可以選擇載入低解析度的圖片。（PS：好智能的樣子）
但是相比如mediaquery的實現，image-set僅支持單個圖片的高清化，不適合在csssprite下使用。並且兼容性也是一大硬傷。
但是一般來說，用在LOGO區域，單個圖片圖標的區域下，也是個不錯的選擇。
7、圖片列表的自適應
關於適配，也就是要讓布局更靈活，在電商網站裡面，商品列表是一個非常常見的結構。
一種比較智能的列表方式是：兩端對齊，間距自適應。
那麼可以使用FLEXBOX布局來實現兩端對齊的效果，也可以使用text-align:justify的方式實現。
先看個flex實現的例子，主要通過justify-content:space-between，來實現：
flexbox的布局方式，在PC端就不合適了，ie9以下都不支持，那麼更友好的方式可以使用text-align:justify來實現，兼容各大主流瀏覽器，包括IE6。
但是這2種布局方式都有一定的局限性。就是列表個數必須湊整。目前還沒找到一種能夠兼容不限個數的實現方案，如果各位看官有更好的實現方式，也歡迎提出，一起交流。
移動端ip6的適配方案有很多，沒有固定的套路及方法，請根據自身業務的特點，選擇其中的一些方法組合使用。
跨無憂（www.kuawuyou.com）來自「跨屏無憂」的想法，我們首個推出永久的、不依賴第三方的跨屏幕適配方案，希望以我們專業的力量幫助每個企業都能實現在移動互聯網的轉變，讓企業網站輕松無憂完成到移動設備的跨屏幕適配，快速抓住移動互聯網機遇。

Ⅶ 能自適應win8.1筆記本的寬屏解析度么

Ⅷ 怎樣低成本的實現網頁在移動端的適配

解決方案涉及到的知識點： viewport 媒體查詢(media query) Javascript window.matchMedia 響應式圖片柵格布局頂部導航測試工具 iOS和Android自帶的瀏覽器都是基於webkit內核，所以我們可以使用viewport屬性和media query技術實現網站的響應性。

在<head>之中添加viewport元數據標簽。

width=device-width 實現屏幕適配，頁面繪制根據觸屏大小變化，保持一致。

initial-scale 表示初始縮放。

Js代碼

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

maximum-scale 表示最大縮放比例，1意味著不能進行縮放。

user-scalable=no
禁用頁面縮放（zooming）功能。禁用縮放後，用戶只能滾動屏幕，讓你的網站看上去更像原生應用。

注意，這種方式我們並不推薦所有網站使用，還是要看你自己的情況而定！

Js代碼

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

媒體查詢(media
query)

根據不同的解析度，引用不用的css

Css代碼

<link rel="stylesheet" type="text/css"

media="screen and (max-device-width: 480px)"

href="shetland.css" />
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />

Bootstrap3的實現 http://v3.bootcss.com/css/#grid-media-queries ，

以下是LESS方法的實現

Js代碼

/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Javascript window.matchMedia

用CSS3解決的確很方便，但某些場景下仍然需要JS技術。

Js代碼

if (window.matchMedia("(min-width: 400px)").matches) {

// The screen width is 400px or wider.

} else {

// The screen width is less than 400px.

}
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}

狀態改變時監聽

Js代碼

function setup_for_width(mql) {

if (mql.matches) {

// The screen width is 400px or wider. Set up or change things

// appropriately.

} else {

// The screen width is less than 400px. Set up or change things

// appropriately.

}

}

var width_mql = window.matchMedia("(min-width: 400px)");

// Add a listener for when the result changes

width_mql.addListener(setup_for_width);

// And share the same code to set things up with our current state.

setup_for_width(width_mql);

導航:首頁 > 操作系統 > androidmediaquery

androidmediaquery

與androidmediaquery相關的資料