国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue移動端h5頁面根據屏幕適配的四種方案

番茄西紅柿 / 1049人閱讀

摘要：在移動端頁面當中，其中適配是經常會遇到的問題，這塊主要有死個方法可以適用。目前全網找或者是嘗試來看，確實沒有一個十全十美的適配的解決方案，只能不斷在實踐應用當中慢慢填坑

最近做了兩個關于h5頁面對接公眾號的項目，不得不提打開微信瀏覽器內置地圖導航的功能確實有點惡心。下次想起來了的話，進行總結分享一下如何處理。在vue移動端h5頁面當中，其中適配是經常會遇到的問題，這塊主要有死個方法可以適用。

方法一：引入淘寶開源的可伸縮布局方案

引入淘寶開源的可伸縮布局方案：https://github.com/amfe/lib-flexible（此處可點擊）

淘寶的其實也和viewport的有點像，但是它主要是根據設備設備像素比設置scale的值，保持視口device-width始終等于設備物理像素，屏幕大小動態計算根字體大小，具體是將屏幕劃分為10等分。這塊也可以直接用js實現，后面會提到

具體引入和使用方法，移步github查看，非常詳細。

 

 

方法二：viewport 的使用

github里邊，有提到  viewport 的使用。我感覺這篇文章關于viewport 的介紹特別詳細，包括比例、是否縮放等的屬性介紹特別的詳細，雖然文章的內容一大片的字看起來很多，但是請耐心看完，都是干貨能很好的讓你認識viewport。如果比較著急，請繼續往下看總結圖吧

http://www.cnblogs.com/2050/p/3877280.html(此處可點擊)

 

關于 viewport 的，這塊直接引用上面文章的內容，我感覺也是最干脆最直接的總結了吧

 

 

方法三：使用js+viewport動態設置手動適配rem

我的編輯器是vscode,添加了插件cssrem自動轉換

index.html



  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    新茶飲

 

 

方法四：根據css的媒體查詢動態設置根部html字體大小

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 843.75%; }
}

 

以上就是總結的方法，但是實話說。目前全網找或者是嘗試來看，確實沒有一個十全十美的適配的解決方案，只能不斷在實踐應用當中慢慢填坑

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

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

相關文章

  • 茴字的四種寫法—移動適配方案的進化

    摘要：是阿里團隊開發的前端適配方案，也是用的的方法。那么第一種方法其實已經能解決前端適配問題了，為什么阿里還要開發一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。 話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    Pocher 評論0 收藏0

  • 茴字的四種寫法—移動適配方案的進化

    摘要：是阿里團隊開發的前端適配方案，也是用的的方法。那么第一種方法其實已經能解決前端適配問題了，為什么阿里還要開發一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。 話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    MockingBird 評論0 收藏0

  • 茴字的四種寫法—移動適配方案的進化

    摘要：是阿里團隊開發的前端適配方案，也是用的的方法。那么第一種方法其實已經能解決前端適配問題了，為什么阿里還要開發一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。 話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    canger 評論0 收藏0

  • 一篇文章了解移動端文本垂直居中

    摘要：經常我們在瀏覽器上調試的好好的，但是到了移動端就會有各種奇特的適配問題最經常遇見莫過于中文字稍微偏上了。為什么中文本偏上文本都會有一個內容區域，這個區域就是我們選中文本時展示的區域。 在日常工作中，經常會遇到圖片+文字+背景色的設計稿實現。經常我們在Chrome瀏覽器上調試的好好的，但是到了移動端就會有各種奇特的適配問題——最經常遇見莫過于Android中文字稍微偏上了。在iOS和An...

    sutaking 評論0 收藏0

  • 一篇文章了解移動端文本垂直居中

    摘要：經常我們在瀏覽器上調試的好好的，但是到了移動端就會有各種奇特的適配問題最經常遇見莫過于中文字稍微偏上了。為什么中文本偏上文本都會有一個內容區域，這個區域就是我們選中文本時展示的區域。 在日常工作中，經常會遇到圖片+文字+背景色的設計稿實現。經常我們在Chrome瀏覽器上調試的好好的，但是到了移動端就會有各種奇特的適配問題——最經常遇見莫過于Android中文字稍微偏上了。在iOS和An...

    Vultr 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<