前言：今天初次了解了移動端的一些常識，包括PC端和移動端的區(qū)別，媒體查詢等的相關(guān)操作,以及國內(nèi)的網(wǎng)站如何實(shí)現(xiàn)不同的端展示不同的樣式。
1、媒體查詢（附帶MDN解釋）
一個媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能的限制了樣式表范圍的表達(dá)式組成，例如寬度、高度和顏色。媒體查詢，添加自CSS3，允許內(nèi)容的呈現(xiàn)針對一個特定范圍的輸出設(shè)備而進(jìn)行裁剪，而不必改變內(nèi)容本身。
- 例1：（通過不同的媒體查詢使不同的CSS文件生效，即css文件一定會被下載，媒體查詢僅可以控制其是否生效，下面的例子是指寬度為0-800px之間時生效）
<!-- link元素中的CSS媒體查詢 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
- 例2：（通過不同的媒體查詢使不同的CSS樣式生效，下面的例子是指寬度在0-600px之間時樣式生效）
<!-- 樣式表中的CSS媒體查詢 -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
注：通過類似例2的方式設(shè)置樣式時，可能需要這樣的效果：瀏覽器寬度0-320px、321px-375px、376px-425px、426px以上，這四個寬度區(qū)間不同的樣式，那么該如何設(shè)置呢？
首先，如果按順序@media (max-width: 320px)、@media (max-width: 375px)、@media (max-width:425px)、@media (min-width: 426px)這么寫的化，會出現(xiàn)一個現(xiàn)象，即所有寬度的樣式都是376px-426px狀態(tài)下的樣式，這是因為后出現(xiàn)的@media (max-width:425px)包含的是0-425px的情形，所以覆蓋了前面的樣式設(shè)置。
所以目前有兩種寫法，（1）倒著寫，即先寫寬度426px以上的，然后寫376px-425px之間的，以此類推；（2）用and連接確定區(qū)間的兩個端點(diǎn)，如@media (min-width: 376px) and (max-width:425px)媒體查詢需要注意的地方
- 如果頁面需要做移動端和pc端兩套樣式，建議
Mobile First，即移動端優(yōu)先 - 手機(jī)端的媒體查詢，一般采用
@media ( max-width:450px; )，即最大寬度為450px左右。
2、關(guān)于 meta viewport
在移動端做網(wǎng)頁，還需要添加這么一行代碼：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
這是由歷史原因的：
由于剛開始智能手機(jī)還沒有出現(xiàn)，所有的網(wǎng)站都是只給PC端來看的，手機(jī)基本無法看到網(wǎng)頁。后來諾基亞大火（此時仍然沒有智能手機(jī)的出現(xiàn)），諾基亞用戶想要比較優(yōu)雅的看網(wǎng)頁，所以很多網(wǎng)站為此專門做了一套“ wap ”頁面，“ wap ”頁面語與HTML法類似，但并非HTML。
直到iPhone 3GS 的出現(xiàn)，智能手機(jī)開始逐漸進(jìn)入人們的視線，當(dāng)時的iPhone 3GS 屏幕寬只有320px，而那時的網(wǎng)站一般都在九百多像素，為了在智能手機(jī)上展示網(wǎng)頁，當(dāng)時蘋果的做法是：把所有的網(wǎng)站都縮小，然后可以兩個手指拖動來放大頁面，而這么做的縮放比例是什么呢？就是用320px寬的屏幕模擬980px寬的網(wǎng)頁（980px這個值是通過市場調(diào)研所得，這是不成文的規(guī)定），所以雖然手機(jī)的分辨率寬度只有三百多像素，但是通過document.documentElement.clientWidth來獲取網(wǎng)頁寬度，一定得到的是980px。
而如今我們的智能手機(jī)發(fā)展迅速，基本所有網(wǎng)站都會專門為移動端設(shè)計樣式，而手機(jī)默認(rèn)會縮小我們的網(wǎng)站，為了阻止網(wǎng)頁的自動縮放，所以有了這句代碼：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
然后來解釋一下這段代碼的意思：
name="viewport" 記住viewport是視口的意思就好啦
width=device-width 寬度=設(shè)備寬度，此時獲取頁面寬度，設(shè)備寬就是頁面寬
user-scalable=no 禁止用戶縮放
initial-scale=1.0 初始縮放倍數(shù) 1.0
maximum-scale=1.0 最大縮放倍數(shù) 1.0
minimum-scale=1.0 最小縮放倍數(shù) 1.0
3、學(xué)會隱藏元素
移動端設(shè)計中，很重要的一條就是要學(xué)會隱藏元素，例如這個網(wǎng)站 https://www.smashingmagazine.com/，就是根據(jù)網(wǎng)頁寬度來響應(yīng)式不同的樣式。以該網(wǎng)站的導(dǎo)航欄為例，它根據(jù)頁面寬度大致三有種不同的樣式
-
寬度較大時，它的導(dǎo)航欄是這樣的，左邊有l(wèi)ogo，中間是導(dǎo)航欄的各種按鈕，右邊是可以點(diǎn)擊的Topics按鈕：
完整的導(dǎo)航欄 -
寬度逐漸縮小，導(dǎo)航欄中間按鈕下邊的小字消失了：
-
寬度繼續(xù)縮小，出現(xiàn)最后一種樣式，導(dǎo)航欄中間的按鈕消失，而右邊原來的Topics按鈕，現(xiàn)在變?yōu)镸enu按鈕：
而Menu點(diǎn)擊后才出現(xiàn)鏈接：
點(diǎn)擊Menu按鈕后的樣式
做出上述效果，最主要的就是在不同的寬度時，讓該出現(xiàn)的元素出現(xiàn)，不該出現(xiàn)的元素隱藏起來
4、移動端與PC端設(shè)計的一些區(qū)別
- 沒有 hover 效果（因此盡量少的使用CSS中的hover可以在從PC端改到移動端開發(fā)時更少的修改代碼，相反的，如果hover在開發(fā)時使用的過多，到移動端時網(wǎng)頁樣式多半就廢了）
- 有 touch 事件 移動端是可以觸摸的，所以需要使用touch觸摸監(jiān)聽
- 沒有 resize 即在移動端，瀏覽器的寬高是無法更改的，其寬高就等于設(shè)備的寬高。
- 沒有滾動條 橫向縱向都沒有滾動條，超出屏幕的內(nèi)容通過滑動屏幕來觀看
- 移動端需要設(shè)置滑動事件 但是原生JS是沒有滑動事件的，不過包括jquery、Vue等框架都封裝的有swipe事件可以實(shí)現(xiàn)滑動效果
5、國內(nèi)大多數(shù)網(wǎng)站的設(shè)計思路
在國內(nèi)，如果網(wǎng)頁需要在不同的設(shè)備擁有不同的樣式，他們很少像第二條中展示的smashingmagazine網(wǎng)站一樣做響應(yīng)式，大體上有以下兩種思路：
- 不同的端跳轉(zhuǎn)到不同的域名，比如淘寶、京東，他們的PC端會跳轉(zhuǎn)到www.taobao.com域名（或www.jd.com），而移動端會跳轉(zhuǎn)到h5.m.taobao.com（或m.jd.com/）
- 不同的端通過識別user Agent，來渲染不同的CSS樣式，如知乎
- 另外，由于如今智能設(shè)備發(fā)展迅猛，如果一個頁面要有多端顯示樣式的話，建議“mobile-first”，即優(yōu)先完成移動端的樣式，然后再做PC端。
