移動(dòng)端解決方案學(xué)習(xí)記錄

honhon 發(fā)布于2019-08-30 13:13 / 3314人閱讀

摘要：先附上參考資料鏈接移動(dòng)端適配方案上移動(dòng)端適配方案下可伸縮布局方案一個(gè)的值轉(zhuǎn)值的自動(dòng)完成插件。

先附上參考資料鏈接；

移動(dòng)端適配方案(上)

移動(dòng)端適配方案(下)

可伸縮布局方案

一個(gè)CSS的px值轉(zhuǎn)rem值的Sublime Text 3自動(dòng)完成插件。

最終測(cè)試了 lib-flexible 的用法；

測(cè)試代碼如下：

html結(jié)構(gòu)





    
    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

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

總結(jié)：

將方案js加入項(xiàng)目中，

所有的尺寸用成rem來(lái)替換；

rem替換快捷方法

sublime 的插件

安裝步驟

下載本項(xiàng)目，

進(jìn)入packages目錄：Sublime Text -> Preferences -> Browse 打開(kāi)packges目錄

復(fù)制下載的cssrem目錄到packges目錄里。

重啟Sublime Text。

進(jìn)入sublime Preferences -> packge settings -> cssrem -> setting-default 復(fù)制

進(jìn)入 setting-user 將復(fù)制的文本粘貼到里面(因?yàn)閣ebapp一般尺寸設(shè)計(jì)按照iphone6 (750px) 來(lái)設(shè)計(jì)，所以，將"px_to_rem" 值改為 75 )修改如下

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

方案用法

比如 ui 給的一張 750 x 1334 的效果圖（貼心的ui會(huì)直接標(biāo)記尺寸大小，好喜歡有沒(méi)有）

沒(méi)有尺寸就自己量嘍；有一張圖片100px x 100px ；因?yàn)橛?cssrem 插件所以直接按照真是的px寬度來(lái)寫，插件會(huì)自己編譯計(jì)算出750px寬度對(duì)應(yīng)的rem尺寸；

云服務(wù)器 GPU云服務(wù)器移動(dòng)端適配方案移動(dòng)端海外移動(dòng)端移動(dòng)端推送

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/115399.html

相關(guān)文章

移動(dòng)端解決方案學(xué)習(xí)記錄

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

GT 2019-08-01 16:05 評(píng)論0 收藏0
移動(dòng)端監(jiān)聽(tīng)安卓手機(jī)返回鍵

摘要：場(chǎng)景相信大家用安卓手機(jī)使用的過(guò)程中，會(huì)遇到這樣的一個(gè)場(chǎng)景按下手機(jī)的返回鍵時(shí)，會(huì)彈出一個(gè)詢問(wèn)框是否退出該頁(yè)面然后點(diǎn)擊了確認(rèn)鍵才真正退出。主要需求安卓手機(jī)用戶按下返回鍵不后退網(wǎng)頁(yè)。【場(chǎng)景】相信大家用安卓手機(jī)使用APP的過(guò)程中，會(huì)遇到這樣的一個(gè)場(chǎng)景：按下手機(jī)的返回鍵時(shí)，會(huì)彈出一個(gè)詢問(wèn)框：是否退出該頁(yè)面/APP?,然后點(diǎn)擊了確認(rèn)鍵才真正退出APP。PC端目前可以通過(guò)頁(yè)面的轉(zhuǎn)場(chǎng)實(shí)現(xiàn)。那這樣的...

DesGemini 2019-08-22 16:35 評(píng)論0 收藏0
后端開(kāi)發(fā)者從零做一個(gè)移動(dòng)應(yīng)用（一）

摘要：最近終于痛定思痛，做了一個(gè)應(yīng)用，目前的產(chǎn)品確實(shí)很一般，但決定以此為起步，逐步完善逐步提高。是以提供游戲下載游戲禮包發(fā)放為核心的移動(dòng)端應(yīng)用。可以簡(jiǎn)單理解成一個(gè)游戲的應(yīng)用市場(chǎng)。在寫后端的時(shí)候，產(chǎn)出了一個(gè)基于的授權(quán)的。移動(dòng)互聯(lián)網(wǎng)時(shí)代，我不想只當(dāng)一個(gè)后端工程師，是時(shí)候?qū)W習(xí)一些新的東西了！一直以來(lái)想要學(xué)習(xí)一些前端的知識(shí)，擴(kuò)寬自己的技術(shù)棧，但是一直以來(lái)對(duì)前端都是進(jìn)行了解，沒(méi)有用一個(gè)產(chǎn)品把這些東...

galaxy_robot 2019-06-27 16:50 評(píng)論0 收藏0
使用vue開(kāi)發(fā)移動(dòng)端管理后臺(tái)

摘要：獨(dú)立完成一個(gè)移動(dòng)端項(xiàng)目不是很明白為何會(huì)有這樣的商品管理后臺(tái)，還是有些經(jīng)驗(yàn)不足，包括對(duì)產(chǎn)品的全局思考，對(duì)插件的選擇等，都有考慮不周的缺點(diǎn)，導(dǎo)致自己中途想換圖形界面插件，浪費(fèi)了點(diǎn)時(shí)間，這里記錄下，總結(jié)下經(jīng)驗(yàn)，理一下思路。獨(dú)立完成一個(gè)移動(dòng)端項(xiàng)目(不是很明白為何會(huì)有這樣的商品管理后臺(tái))，還是有些經(jīng)驗(yàn)不足，包括對(duì)產(chǎn)品的全局思考，對(duì)插件的選擇等，都有考慮不周的缺點(diǎn)，導(dǎo)致自己中途想換圖形界面插件，...

simpleapples 2019-08-23 15:42 評(píng)論0 收藏0
Win10應(yīng)用設(shè)計(jì)的那些事兒

摘要：如何挑選合適的導(dǎo)航結(jié)構(gòu)導(dǎo)航設(shè)計(jì)是應(yīng)用設(shè)計(jì)的關(guān)鍵，設(shè)計(jì)規(guī)范以下簡(jiǎn)稱規(guī)范中將導(dǎo)航元素分為對(duì)等層次和歷史導(dǎo)航等幾類，例如表和透視表導(dǎo)航窗格是對(duì)等導(dǎo)航元素，中心大綱細(xì)節(jié)屬于分層導(dǎo)航元素，返回則屬于歷史導(dǎo)航元素。此文已由作者楊凱明授權(quán)網(wǎng)易云社區(qū)發(fā)布。歡迎訪問(wèn)網(wǎng)易云社區(qū)，了解更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)。繼Windows 10系統(tǒng)發(fā)布之后，很多Windows用戶更新了系統(tǒng)。win10系統(tǒng)的發(fā)布，...

ad6623 2019-06-28 11:00 評(píng)論0 收藏0