移動端前端開發與PC端比有哪些不一樣？

1，移動端在佈局跟js效果方面，與PC端有什麼不一樣

先說佈局方面：
PC端我們最經常使用的就是固定寬度980px（也有960，1000,1200），而後水平居中

width:980px;margin:0 auto;

但移動端就不能這麼用了，由於不少網頁都是能夠橫屏看，也能夠豎屏看；不少屏幕的分辨率不同；
因此只要牽涉到移動端，就要牽涉到響應式（也叫自適應）；若是是隻針對移動端的項目，我平時主要想到的是320px寬 到 750px寬的兼容

而後是js方面，這個你應該問的更詳細一些，由於有沒有canvas對js影響很大；
第1、普通移動端網頁（好比手機新浪網，手機淘寶，手機百度等）
這個在js方面和PC端區別不是太大；
主要的區別在於移動端沒有了鼠標懸停（onmouseover）；點擊（onclick）還能夠用；
多了觸摸、滑動（這裏我沒本身寫過原生的，只會用一些插件）
我經常使用的移動端插件：
TouchSlide 觸屏滑動特效插件 大話主席
Touch.js
Swiper中文網
第2、canvas相關遊戲
canvas相關的html5增長了好多js，不過我不作遊戲方面，因此就很少廢話了；

2，兼容性方面有哪些常見的坑要避免

這個和第一個、第三個都有重複，你再問的詳細些吧；

3，如何適配不一樣的分辨率和屏幕尺寸

我說下我經常使用的（有任何不對的地方請大神指正）
原來沒有iPhone6和iPhone6 plus時，設計圖是640px寬的，
切圖的時候就按照設計圖正常切圖；（按照標準的話，這裏切圖原本應該分紅兩種，一種是320px寬一倍圖，一種是640px寬的二倍圖；而後普通屏幕用一倍圖，retina視網膜屏幕用 @2x 二倍圖，但是咱們的設計師太懶了，只給我一個640px寬的二倍圖，這裏求大神指教該怎樣才能符合標準）
不過最後寫css的時候，不要按照640px寫，要按照320px寫；全部圖片和全部html標籤的尺寸都要減半；若是圖片img在設計圖上的寬度是80px，css就要

width:40px;

若是一個按鈕設計圖上寬100px，你的css就要

width:50px;

後來有了iPhone6和iPhone6 plus，設計師給的設計圖就變成了750px，按說由「二倍」變成了「三倍」，可是咱們的設計師比較懶，不肯費事，因此如今個人解決方案仍是按320px寬，img和全部html標籤css減半處理；

4，如何測試

我最經常使用的是chrome的手機模擬器；
右鍵-審查元素（或F12），developer tools出來後，點擊左上角那個手機；

5，哪裏有完整項目的開發視頻能夠學習

完整項目的開發視頻我尚未見過，我比較喜歡在慕課網上面看一些html5和css3的知識點；
勸你有時間的話儘可能接實戰項目吧，別總看視頻，作一個項目比看多少視頻都有用；


650px也能夠的，只要是在640px-750px均可以；
下面是我經常使用的html和body的css；
至於em和rem，我認爲只有在單屏的app上面（不出現滾動條那種）；只要是出現滾動條的正常頁面，就仍是用百分比和像素px吧；

html{height:100%;font-size:62.5%;-webkit-text-size-adjust:none;}body{height:100%;
max-width:750px;min-width:320px;margin:0 auto;color:#6b6b6b;padding:0;font:normal 1.2em/1.6 
Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",
sans-serif;background-color:#f5f5f5;}