PC端網頁和移動端網頁,自己做的總結

2022-05-21 01:56:17 字數 927 閱讀 3595

1.pc考慮的是瀏覽器的相容性,而移動端開發考慮的更多的是手機相容性,因為目前不管是android手機還是ios手機,一般瀏覽器使用的都是webkit核心,所以說做移動端開發,更多考慮的應該是手機解析度的適配,和不同作業系統的略微差異化。

2.在部分事件的處理上,移動端多出來的事件是觸屏事件,而缺少的是hover事件。 另外包括移動端彈出的手機鍵盤的處理,這樣的問題在pc端都是遇不到的。

3.在布局上,移動端開發一般是要做到布局自適應的,需要熟練使用rem布局,還有百分比流式布局

4.在動畫處理上,pc端由於要考慮ie的相容性,所以通常使用js做動畫的通用性會更好一些,但是css3做了很大的犧牲,而在手機端,如果要做一些動畫、特效等,第一選擇肯定是css3, 既簡單、效率又高。對於h5,css3的新特性,移動端要比pc端相容性好

7.css3的動畫在移動端用的還是比較多的,但同時也要注意效能。

8.一般pc端用jquery,移動端用zepto,因為移動端的流量還是比較重要的,所以引入的資源或者外掛程式,能小則小,乙個30k的資源和乙個80k的資源,在移動端的差別還是挺大的。未壓縮的jquery是262kb,壓縮的jquey是83kb。未壓縮的zepto是54kb,壓縮的zepto只有9kb。

切記:zepto是個分模組的移動端的jquery,要記得根據需求,引入不同的模組

9.最好能掌握一套完整的前端開發架構,比如模組化、打包、壓縮、快取有條件的還可以做一下自動化測試等等。

10.效能優化,包括首屏的開啟速度、使用者響應延遲、渲染效能、動畫幀率等在手機上都需要特別注意。

網頁自適應pc端和移動端

手機的螢幕比較小,寬度通常在600畫素以下 pc的螢幕寬度,一般都在1000畫素以上 目前主流寬度是1366 768 有的還達到了2000畫素。同樣的內容,要在大小迥異的螢幕上,都呈現出滿意的效果,並不是一件容易的事。很多 的解決方法,是為不同的裝置提供不同的網頁,比如專門提供乙個mobile版本,...

PC端網頁特效

動態得到相關元素的位置 大小 1.獲得元素距離帶有定位的父元素的位置 2.獲得元素自身的大小 返回的數值都不帶單位 offsettop 可以得到元素的偏移 位置 返回的不帶單位的數值 offsetleft offsetwidth 可以得到元素的大小 寬度和高度 是包含padding border w...

pc端網頁自適應顯示在移動端

當我們將乙個pc端的網頁放到移動端的時候,移動端瀏覽器會將pc端的網頁按照一定的比例完整的顯示出來,這是因為移動端的瀏覽器預設的會將網頁渲染在乙個比例比較大的viewport中排版 ios預設的是980px,android4.0以上為980px 然後通過比例縮放看到整個頁面的全貌。但是,使用預設的v...