移動端解決方案學習記錄

GT 發布于2019-08-01 16:05 / 864人閱讀

摘要：先附上參考資料鏈接移動端適配方案上移動端適配方案下可伸縮布局方案一個的值轉值的自動完成插件。

先附上參考資料鏈接；

移動端適配方案(上)

移動端適配方案(下)

可伸縮布局方案

一個CSS的px值轉rem值的Sublime Text 3自動完成插件。

最終測試了 lib-flexible 的用法；

測試代碼如下：

html結構





    
    Document
    
    



    
        1rem === 100px
        
    
    
        2rem == 200px
        
    
    
        3rem == 300px
        
    
    
        4rem == 400px

css樣式

div {
    margin: 0.133333rem 0;
}

img {
    width: 100%;
}

.test1 {
    border: 0.013333rem solid red;
    width: 1.333333rem;
}

.test2 {
    border: 0.013333rem solid red;
    width: 2.666667rem;
}

.test3 {
    border: 0.013333rem solid red;
    width: 4.0rem;
}

.test4 {
    border: 0.013333rem solid red;
    width: 5.333333rem;
}

.test5 {
    border: 0.013333rem solid red;
    width: 6.666667rem;
}

效果展示

iphone6

iphone6 Plus

Galaxy Note3

以上是三種設備下面的效果圖；
為了測試結果是真跟效果圖尺寸一樣；特此，我在ps中比對了（將其他的尺寸的手機等比例放大縮小到iphone6 plus 的尺寸）一下，如下；

總結：

將方案js加入項目中，

所有的尺寸用成rem來替換；

rem替換快捷方法

sublime 的插件

安裝步驟

下載本項目，

進入packages目錄：Sublime Text -> Preferences -> Browse 打開packges目錄

復制下載的cssrem目錄到packges目錄里。

重啟Sublime Text。

進入sublime Preferences -> packge settings -> cssrem -> setting-default 復制

進入 setting-user 將復制的文本粘貼到里面(因為webapp一般尺寸設計按照iphone6 (750px) 來設計，所以，將"px_to_rem" 值改為 75 )修改如下

{
    "px_to_rem": 75,
    "max_rem_fraction_length": 6,
    "available_file_types": [".css", ".less", ".sass"]
}

方案用法

比如 ui 給的一張 750 x 1334 的效果圖（貼心的ui會直接標記尺寸大小，好喜歡有沒有）

沒有尺寸就自己量嘍；有一張圖片100px x 100px ；因為有 cssrem 插件所以直接按照真是的px寬度來寫，插件會自己編譯計算出750px寬度對應的rem尺寸；

云服務器 GPU云服務器移動端適配方案移動端海外移動端移動端推送

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50285.html

移動端解決方案學習記錄

摘要：先附上參考資料鏈接移動端適配方案上移動端適配方案下可伸縮布局方案一個的值轉值的自動完成插件。先附上參考資料鏈接；移動端適配方案(上) 移動端適配方案(下) 可伸縮布局方案一個CSS的px值轉rem值的Sublime Text 3自動完成插件。最終測試了 lib-flexible 的用法；測試代碼如下： html結構 Document ...

honhon 2019-08-30 13:13 評論0 收藏0
移動端監聽安卓手機返回鍵

摘要：場景相信大家用安卓手機使用的過程中，會遇到這樣的一個場景按下手機的返回鍵時，會彈出一個詢問框是否退出該頁面然后點擊了確認鍵才真正退出。主要需求安卓手機用戶按下返回鍵不后退網頁。【場景】相信大家用安卓手機使用APP的過程中，會遇到這樣的一個場景：按下手機的返回鍵時，會彈出一個詢問框：是否退出該頁面/APP?,然后點擊了確認鍵才真正退出APP。PC端目前可以通過頁面的轉場實現。那這樣的...

DesGemini 2019-08-22 16:35 評論0 收藏0
后端開發者從零做一個移動應用（一）

摘要：最近終于痛定思痛，做了一個應用，目前的產品確實很一般，但決定以此為起步，逐步完善逐步提高。是以提供游戲下載游戲禮包發放為核心的移動端應用?？梢院唵卫斫獬梢粋€游戲的應用市場。在寫后端的時候，產出了一個基于的授權的。移動互聯網時代，我不想只當一個后端工程師，是時候學習一些新的東西了！一直以來想要學習一些前端的知識，擴寬自己的技術棧，但是一直以來對前端都是進行了解，沒有用一個產品把這些東...

galaxy_robot 2019-06-27 16:50 評論0 收藏0
使用vue開發移動端管理后臺

摘要：獨立完成一個移動端項目不是很明白為何會有這樣的商品管理后臺，還是有些經驗不足，包括對產品的全局思考，對插件的選擇等，都有考慮不周的缺點，導致自己中途想換圖形界面插件，浪費了點時間，這里記錄下，總結下經驗，理一下思路。獨立完成一個移動端項目(不是很明白為何會有這樣的商品管理后臺)，還是有些經驗不足，包括對產品的全局思考，對插件的選擇等，都有考慮不周的缺點，導致自己中途想換圖形界面插件，...

simpleapples 2019-08-23 15:42 評論0 收藏0
Win10應用設計的那些事兒

摘要：如何挑選合適的導航結構導航設計是應用設計的關鍵，設計規范以下簡稱規范中將導航元素分為對等層次和歷史導航等幾類，例如表和透視表導航窗格是對等導航元素，中心大綱細節屬于分層導航元素，返回則屬于歷史導航元素。此文已由作者楊凱明授權網易云社區發布。歡迎訪問網易云社區，了解更多網易技術產品運營經驗。繼Windows 10系統發布之后，很多Windows用戶更新了系統。win10系統的發布，...

ad6623 2019-06-28 11:00 評論0 收藏0