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

資訊專欄INFORMATION COLUMN

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

Mr_houzi / 1333人閱讀

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

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

"head"里添加"meta"

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

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

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

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

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

設(shè)計(jì)稿上元素的尺寸(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://m.specialneedsforspecialkids.com/yun/114918.html

相關(guān)文章

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

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

    xuxueli 評論0 收藏0

  • 移動端適配方案

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

    feng409 評論0 收藏0

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

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

    canger 評論0 收藏0

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

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

    Pocher 評論0 收藏0

發(fā)表評論

0條評論

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