基于 vw 單位的移動端適配方案學習筆記

xuxueli 發布于2019-08-02 15:28 / 2211人閱讀

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

基于 vw 單位的移動端適配方案學習筆記

回顧并總結一下移動端適配的一些知識

前提要求

"head"里添加"meta"

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

計算 html 的"font-size"

// 設計稿寬度, 750|640|520
var designWith = 750

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

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

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

使用

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

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

code

GPU云服務器云服務器移動端適配方案移動端適配移動端適配 js html 單位vw

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

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

基于 vw 單位的移動端適配方案學習筆記

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

Mr_houzi 2019-08-30 11:19 評論0 收藏0
移動端適配方案

摘要：業務環境是決定整體項目的適配方案的核心因素。而淘寶的主站和類似，分為移動端頁面和端頁面，端頁面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時候將注意力集中在中間區域。移動端適配方案移動端適配方案是一個老生常談的話題，但是對于不同的項目、不同的業務場景可能會需要不同的適配方案來進行移動端適配，向下兼容的baseline也需要提前訂好。整體寬高其實移動端適配就和下面的玩具一樣，...

feng409 2019-08-30 15:54 評論0 收藏0
茴字的四種寫法—移動適配方案的進化

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

canger 2019-08-22 16:12 評論0 收藏0
茴字的四種寫法—移動適配方案的進化

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

Pocher 2019-08-02 10:10 評論0 收藏0