亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

基于 vw 單位的移動端適配方案學(xué)習(xí)筆記

xuxueli / 2284人閱讀

摘要：基于單位的移動端適配方案學(xué)習(xí)筆記回顧并總結(jié)一下移動端適配的一些知識前提要求里添加兼容性讓它自個兒玩去吧計算的設(shè)計稿寬度設(shè)計稿上對應(yīng)設(shè)備上多少個單位的表示設(shè)備屏幕寬度的的大小同時也是單位的大小為了方便后面的尺寸計算放大倍即設(shè)計稿上

基于 vw 單位的移動端適配方案學(xué)習(xí)筆記 
回顧并總結(jié)一下移動端適配的一些知識
前提要求

"head"里添加"meta"

兼容性,ie9+ (ie8 讓它自個兒玩去吧)

計算 html 的"font-size" 
// 設(shè)計稿寬度, 750|640|520
var designWith = 750

// 設(shè)計稿上1px對應(yīng)設(shè)備上多少個單位的vw, 100vw表示設(shè)備屏幕寬度
var vw = 100 / designWith

// html的font-size的大小
// 同時也是單位rem的大小
// 為了方便后面的尺寸計算,放大100倍,即設(shè)計稿上的100px;
var fontSize = 100 * vw

// 設(shè)置html的font-size, 可以直接寫在 css 里面
document.getElementsByTagName("html")[0].style.fontSize = fontSize + "vw"
使用

設(shè)計稿上元素的尺寸(px): eleWidth

.ele {
    width: (eleWidth/100)rem;
}
code 


    
        
        
        
        Document

        
    
    
        
    
            
  • box 01
    • 
            
  • box 02
    • 
            
  • box 03
    •

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/54153.html

相關(guān)文章

  • 基于 vw 單位的移動端適配方案學(xué)習(xí)筆記

    摘要：基于單位的移動端適配方案學(xué)習(xí)筆記回顧并總結(jié)一下移動端適配的一些知識前提要求里添加兼容性讓它自個兒玩去吧計算的設(shè)計稿寬度設(shè)計稿上對應(yīng)設(shè)備上多少個單位的表示設(shè)備屏幕寬度的的大小同時也是單位的大小為了方便后面的尺寸計算放大倍即設(shè)計稿上 基于 vw 單位的移動端適配方案學(xué)習(xí)筆記 回顧并總結(jié)一下移動端適配的一些知識 前提要求 head里添加meta 兼容性,ie9+ (ie8 讓它自個兒...

    Mr_houzi 評論0 收藏0

  • 移動端適配方案

    摘要：業(yè)務(wù)環(huán)境是決定整體項(xiàng)目的適配方案的核心因素。而淘寶的主站和類似，分為移動端頁面和端頁面，端頁面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時候?qū)⒆⒁饬性谥虚g區(qū)域。 移動端適配方案 移動端適配方案是一個老生常談的話題，但是對于不同的項(xiàng)目、不同的業(yè)務(wù)場景可能會需要不同的適配方案來進(jìn)行移動端適配，向下兼容的baseline也需要提前訂好。 整體寬高 其實(shí)移動端適配就和下面的玩具一樣，...

    feng409 評論0 收藏0

  • 茴字的四種寫法—移動適配方案的進(jìn)化

    摘要：是阿里團(tuán)隊開發(fā)的前端適配方案，也是用的的方法。那么第一種方法其實(shí)已經(jīng)能解決前端適配問題了，為什么阿里還要開發(fā)一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機(jī)屏幕上，因?yàn)槲锢硐袼氐脑黾?，存在小于的顯示空間。 話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統(tǒng)化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    canger 評論0 收藏0

  • 茴字的四種寫法—移動適配方案的進(jìn)化

    摘要：是阿里團(tuán)隊開發(fā)的前端適配方案，也是用的的方法。那么第一種方法其實(shí)已經(jīng)能解決前端適配問題了，為什么阿里還要開發(fā)一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機(jī)屏幕上，因?yàn)槲锢硐袼氐脑黾?，存在小于的顯示空間。 話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統(tǒng)化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    Pocher 評論0 收藏0

發(fā)表評論

0條評論

xuxueli

男|高級講師

TA的文章

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