這陣子在群里，發(fā)現(xiàn)很多朋友已經(jīng)開始設(shè)計微信網(wǎng)站或是webapp項目了，他們大多數(shù)都是第一次來弄這些，所以很想看看有沒有相關(guān)的WebAPP或是手機網(wǎng)站的案例，可以用來借鑒和學(xué)習(xí)。有些app設(shè)計跟web前端也想了解這塊的教程。所以今天，25學(xué)堂打算出一些關(guān)于WebAPP（手機網(wǎng)站）的基礎(chǔ)性的教程，幫大家掃掃盲！O(∩_∩)O~

隨著智能手機和智能設(shè)備的普及，從而影響了我們?nèi)粘５霓k公和生活設(shè)備，而不是單純的是pc端。智能手機和其他智能產(chǎn)品也成為了我們的移動終端。

WebAPP（手機網(wǎng)站）第一個知識點：什么是css媒體查詢

網(wǎng)站設(shè)計的一個新趨勢是使用media queries（媒體查詢），這是因為如今有大量的設(shè)備可以訪問因特網(wǎng)，因此所有的網(wǎng)站都需要適應(yīng)各種設(shè)備。responsive design（響應(yīng)設(shè)計）應(yīng)運而生。它可以發(fā)現(xiàn)用戶使用的是什么設(shè)備，并調(diào)整設(shè)計內(nèi)容以適應(yīng)設(shè)備。

CSS3給我們帶來了許多有助于web設(shè)計的新功能，其中之一便是提高了網(wǎng)站可用性的Media Queries。

下面是我們必須會常用到的一些CSS媒體查詢元素：

- width 視口寬度

- height 視口高度

- device-width 設(shè)備屏幕的寬度

- device-height 設(shè)備屏幕的高度

- orientation 檢測屏幕處于橫屏還是豎屏

- aspect-ratio 基于視口的寬高比例

- device-aspect-ratio 基于設(shè)備屏幕的寬高比

- color 顏色的位數(shù)，如min-color：32 匹配設(shè)備是否有32位或以上的顏色

- color-index 設(shè)備的顏色索引表中的顏色數(shù)

- monochrome 檢測單色振緩沖區(qū)中每像素使用的位數(shù)。為非負數(shù)，如monochrome：3

- resolution 檢測屏幕或打印機的分辨率，如min-resolution：300dpi(dpi后面會介紹)，也可以是每厘米像素點的度量值，如min-resolution：120dpcm

- scan 掃描方式，值為progressive（逐行掃描）、interlace（隔行掃描）

- grid 檢測輸出設(shè)備是網(wǎng)格設(shè)備還是位圖設(shè)備

創(chuàng)建媒體查詢時，上述特性（scan和grid不行）都可以加上min和max前綴創(chuàng)建媒體查詢的范圍。除了link標(biāo)簽?zāi)軌蜻M行媒體查詢，是不是還有其它的呢，答案是Yes 。html中的meta標(biāo)簽，此前我們25學(xué)堂之前介紹過的這個：meta標(biāo)簽在移動平臺的響應(yīng)式設(shè)計

CSS媒體查詢用于找出屏幕當(dāng)前的最大分辨率，并允許你根據(jù)分辨率使用不同的CSS。這個特點叫做responsive design，它能找出用戶當(dāng)前使用的分辨率并通過CSS媒體查詢對其做出響應(yīng)。

過去，我們讓網(wǎng)站適應(yīng)各種分辨率的唯一方法就是使用fluid page design（流體網(wǎng)頁設(shè)計），但是CSS媒體查詢具有更多的功能。

通過使用CSS媒體查詢?你可以在小屏幕上隱藏側(cè)邊欄以展示更多的內(nèi)容，也可以在大屏幕上增大字體，這些都無法用fluid page design來實現(xiàn)。

講了這么多，有人可能會疑惑為什么這些都不是用在CSS中的？別急，慢慢來，現(xiàn)在就介紹如何在樣式中運用，按照上述屏幕分辨率的四種劃分，我們可以看到基本可以舍棄ldpi了。

/* 中分辨率屏幕 */

/*高分辨率屏幕*/

/*超高分辨率屏幕（傳說中的Retina屏）*/

上面就是在css中的用法，把我們需要的css代碼包含在大括號中就能用了，是不是很方便的樣子%>_<%。當(dāng)然我們還可以用到之前提供的幾個特性，如下：

針對視口寬度不大于768像素的情況加載大括號中的樣式。

CSS的動態(tài)改變

通過使用CSS我們可以為不同的元素以及這些元素的不同屬性增加animation（動畫效果）。

使用media queries的主要目的之一是改變元素的大小以適應(yīng)網(wǎng)頁。眾所周知，改變大小的過程可以產(chǎn)生動畫效果，我們可以使用如下代碼為CSS的Width 和 Height屬性添加動畫

/* webkit */

-webkit-animation-property: -webkit-width;

-webkit-animation-property: -webkit-height;

-webkit-transition-duration: 1s;

/* moz */

-moz-animation-property: -moz-width;

-moz-animation-property: -moz-height;

-moz-transition-duration: 1s;

/* opera */

-o-animation-property: -o-width;

-o-animation-property: -o-height;

-o-transition-duration: 1s;

在你的media queries元素中添加以上代碼，從而在改變大小時產(chǎn)生動畫效果。

具體的CSS3查詢媒體動畫效果案例：demo

?下面是關(guān)于web APP或者手機網(wǎng)站的小技巧

（1）、如何禁止用戶旋轉(zhuǎn)設(shè)備

這里其實是想告訴你在瀏覽器里辦不到，因為禁止開發(fā)者阻止瀏覽器的orientationchange事件。

（2）、設(shè)置撥打電話號碼代碼

可以用tel：13888888888等這樣的號碼來觸發(fā)打電話。

（3）盒子邊框溢出

當(dāng)我們指定了一個塊級元素時，并且為其定義了邊框，設(shè)置了其寬度為100％。按照盒子模型，就會發(fā)現(xiàn)該元素的左右邊框各1個像素會溢了，導(dǎo)致出現(xiàn)橫向滾動條，這時候我們可以為其添加-webkit-box-sizing:border-box用來指定該盒子的大小包括邊框的寬度。

（4）、ios數(shù)字顏色樣式超過9位后失控

這個問題我不知道該怎么描述，就是在ios中，當(dāng)數(shù)字超過9位數(shù)時，瀏覽器會給這個數(shù)字默認加上一個顏色，無論你設(shè)置什么顏色都無效。

（5）、iOS可禁止用戶在新窗口打開頁面

在項目開發(fā)中，有時我們需要某個鏈接在當(dāng)前頁面打開，這樣需要禁止用戶在新窗口打開頁面，我們可以使用a標(biāo)簽的target=”_self”指定在當(dāng)前頁面打開，但是在iOS中長按鏈接一段時間后，系統(tǒng)會彈出一個對話框，用戶可以通過點擊”在新頁面中打開”來在新窗口打開頁面，這樣我們指定的target屬性就失效了，但是可以通過指定當(dāng)前元素的-webkit-touch-callout屬性為none來禁止iOS彈出這些按鈕。

?

?CSS3媒體查詢官網(wǎng)手冊地址：

http://www.w3.org/html/ig/zh/wiki//CSS3媒體查詢