媒體查詢

什么是媒體查詢

媒體查詢可以讓我們根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）為其設定CSS樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用于檢測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的一些輸出設備定制顯示效果。

1、媒體查詢操作方式

實際操作為：對設備提出詢問（稱作表達式）開始，如果表達式結果為真，媒體查詢中的CSS被應用，如果表達式結果為假，媒體查詢內的CSS將被忽略。

2、媒體查詢結構

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

body { background-color:blue;}

}

設備類型（默認為all）

screen 是媒體類型里的一種，CSS2.1定義了10種媒體類型

and 被稱為關鍵字，其他關鍵字還包括 not(排除某種設備)，only(限定某種設備)

(min-width: 400px) 就是媒體特性，其被放置在一對圓括號中。

默認樣式 注意：默認樣式要寫在最前面

/* 打印樣式 */@media print {}

/* 手機等小屏幕手持設備 */ @media screen and (min-width: 320px) and (max-width: 480px) {}

/* 平板之類的寬度 1024 以下設備 */ @media only screen and (min-width: 321px) and (max-width: 1024px) {}

/* PC客戶端或大屏幕設備: 1028px 至更大*/ @media only screen and (min-width: 1029px) {}

/* 豎屏 */@media screen and (orientation:portrait) and (max-width: 720px) {對應樣式}

/* 橫屏 */@media screen and (orientation:landscape){對應樣式}

3、CSS2 Media用法

其實并不是只有CSS3才支持Media的用法，早在CSS2開始就已經支持Media，具體用法，就是在HTML頁面的heaad標簽中插入如下的一段代碼

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

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

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

4、常涉及到的css屬性

display; width; float; text-align; font

Responsive Web Design 響應式網頁設計

1、常見的布局方案

固定布局：以像素作為頁面的基本單位，不管設備屏幕及瀏覽器寬度，只設計一套尺寸；

可切換的固定布局：同樣以像素作為頁面單位，參考主流設備尺寸，設計幾套不同寬度的布局。通過識別的屏幕尺寸或瀏覽器寬度，選擇最合適的那套寬度布局；

彈性布局：以百分比作為頁面的基本單位，可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度，并能完美利用有效空間展現最佳效果；

混合布局：同彈性布局類似，可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度，并能完美利用有效空間展現最佳效果；只是混合像素、和百分比兩種單位作為頁面單位。

布局響應：對頁面進行響應式的設計實現，需要對相同內容進行不同寬度的布局設計，有兩種方式：pc優先（從pc端開始向下設計）；

移動優先（從移動端向上設計）；無論基于那種模式的設計，要兼容所有設備，布局響應時不可避免地需要對模塊布局做一些變化（發生布局改變的臨界點稱之為斷點），

2、響應式布局方案

（1）模塊中內容：擠壓－拉（布局不變）

（2）模塊中內容：換行－平鋪（布局不變）

（3）模塊中內容：刪減－增加（布局不變）

（4）模塊位置變換（布局改變）

（5）模塊展示方式改變：隱藏－展開（布局改變）

（6）模塊數量改變：刪減－增加（布局改變）

3、響應式布局特點

設計特點：

面對不同分辨率設備靈活性強

能夠快捷解決多設備顯示適應問題

缺點：

兼容各種設備工作量大，效率低下

代碼累贅，會出現隱藏無用的元素，加載時間加長

其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果

一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況

4.Meta標簽的設置

準備工作：設置Meta標簽

忽略將頁面中的數字識別為電話號碼

忽略Android平臺中對郵箱地址的識別

當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari

將網站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式

vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。

vh：viewpoint height，視窗高度，1vh等于視窗高度的1%。

vmin：vw和vh中較小的那個。

vmax：vw和vh中較大的那個。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持

/* html中font-size：100px;1rem == 100px;100px == ?vw;

如果設計圖為640px;

考慮的dpr 2640px / 2 == 320px;100vw == 320px;1vw == 3.2px;?vw == 100px;

31.25vw == 100px;

1rem = 100px = 31.25vw

如果設計圖為750px;

考慮的dpr 2750px / 2 == 375px;100vw == 375px;1vw == 3.75px;?vw == 100px;

26.67vw == 100px;

1rem = 100px = 26.67vw */

清除默認

@charset "utf-8";

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input,figure{margin:0;padding:0}

{box-sizing:border-box;}/觸發怪異盒模型*/

body{font-family: '微軟雅黑';}

h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:16px;}

b,strong{font-weight:normal;}

em,i{font-style:normal;}

a,u{text-decoration:none;}

img{border:0;display:block;}

ul,ol,li{list-style:none;}

input{outline:none;}

.clear-fix:after{content:".";clear:both;display:block;height:0;overflow: hidden;visibility: hidden;}

html,body{height:100%;}

轉載于:https://www.cnblogs.com/zhongchao666/p/9564316.html

總結

以上是生活随笔為你收集整理的16.移动端设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。