1 手機端頁面的做法
學(xué)會 media query
學(xué)會要設(shè)計圖（沒圖不做）
實在要做也行焰宣，丑可別怪我
學(xué)會隱藏元素
手機端要加一個 meta
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2 手機端的交互方式不一樣
- 沒有 hover
- 有 touch 事件 (jquery .swipe 插件)
- 沒有 resize
- 沒有滾動條
3 媒體查詢
- 第一種
<link rel="stylesheet" href="mobile.css" media="(max-width:320px)">
- 第二種
@media (min-width: 769px) {
body{
background-color: red;
}
}
@media (max-width:768px ) {
body{
background-color: orange;
}
}
@media (max-width:425px ) {
body{
background-color: yellow;
}
}
@media (max-width:375px ) {
body{
9 background-color: green;
}
}
@media (max-width:320px ) {
body{
background-color: #fff;
}
}
http://js.jirengu.com/vodaf/1/edit
4 菜單隱藏元素
http://js.jirengu.com/xagaw/1/edit
5 一般我們都是做兩套頁面 （PC和手機）
image.png
6 手機端加一個meta
最開始頁面都只是給PC用的，沒有智能手機闪唆，過一段時間出現(xiàn)諾基亞，諾基亞的手機頁面是用wap開發(fā)的悄蕾，類似于html, 所以當(dāng)時想讓諾基亞用戶訪問你的網(wǎng)站帆调，你得做兩套豆同，一套是html做的，一套用wap做的影锈。
后來出現(xiàn)iphone3GS鸭廷，但是蘋果的頁面是320px，而市面上PC的網(wǎng)站大多是980px沃但，所以蘋果想到的辦法是用320px模擬980px, 把PC端頁面縮放佛吓，當(dāng)用戶拿手機瀏覽時，只需要雙擊就可以放大來看淤刃≈ㄐ停縮放比例是模擬980px來縮放的
image.png
我們已經(jīng)給手機做了一套移動端代碼，但是由于上面的原因頁面會縮放灼伤，所以我們有了下面這個meta標(biāo)簽咪鲜，防止頁面縮放
image.png
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
