資訊專欄INFORMATION COLUMN
摘要：需要了解的知識和類似，相較于父元素的字體大小，而相較于的字體大小實現原理有了這個以上的前提可以通過監測屏幕大小改變的字體大小，從而實現自適應大小的效果獲取設備寬度與設計稿寬度的比例作為的大小假如是那么設計稿上代碼就要寫這樣寫太大通常
需要了解的知識
html{font-size:16px}
p{font-size:1rem}
1rem = 16px;
rem 和 em 類似，em相較于父元素的字體大小，而rem相較于html的字體大小；
實現原理有了這個以上的前提可以通過監測屏幕大小改變html的字體大小，從而實現自適應大小的效果；
獲取設備寬度與設計稿寬度的比例 作為html font-size的大小；
假如是750/750 那么font-size：1px;設計稿上200px,代碼就要寫200rem;這樣寫太大.
通常750/750*100,多除100；100作為px轉化為rem的換算比例，100px = 1rem;那么設計稿750px代碼里就要寫7.5rem;
function getRem () {
var html = document.getElementsByTagName("html")[0];
var deviceWidth = document.body.clientWidth || document.documentElement.clientWidth;
var rem = deviceWidth / designWidth * 100;
console.log(rem)
html.style.fontSize = rem+ "px";
}
設計稿為750px時，html{font-size:50px;} 50px * 7.5 = 375px;正好是設備的寬度；
當設計稿750px,設備320px時， 320/750100 = 42.6666667;42.66667 7.5 = 320px;
所以當設備為375時 7.5rem是maxWidth,設備是320時，7.5rem也是maxWidth，這樣就達到了自適應設備的目的；
簡陋版完整代碼： (function (designWidth,n) {
function getRem () {
var html = document.getElementsByTagName("html")[0];
var deviceWidth = document.body.clientWidth || document.documentElement.clientWidth;
var rem = deviceWidth / designWidth * n;
console.log(rem)
html.style.fontSize = rem+ "px";
}
getRem ()
window.addEventListener("resize",function (){
getRem()
})
})(750,100)
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116294.html
摘要：單位介紹既然扯到了這個單位，那就有必要先解釋下這個單位具體含義，上的解釋注意圖中的畫線部分，這個單位需要高版本的瀏覽器支持，不過，一般用于移動端布局，所以，基本上無需考慮瀏覽器版本問題，放心用吧。相對于根元素的大小，自動計算出其具體值。 A. 先看一個函數： /* * 設置根元素字體大小 * @param Number minSW 最小縮放的設備屏幕寬度 * @param Nu...
摘要：背景現在工作中有超過一半的時間用于移動端項目的開發，包括嵌入頁，微信頁面和移動頁。經過研究，我在公司的多個移動端項目使用了布局來解決移動端自適應布局的問題。簡單的說它就是一個相對單位，布局是一個流行的解決移動端響應式布局的方案。 背景 現在工作中有超過一半的時間用于移動端項目的開發，包括app嵌入頁，微信頁面和移動wap頁。 開發移動端頁面跟開發PC頁面的一個大區別就是移動端對響應式布...
閱讀 1502·2021-11-22 09:34
閱讀 3320·2021-09-29 09:35
閱讀 562·2021-09-04 16:40
閱讀 2911·2019-08-30 15:53
閱讀 2582·2019-08-30 15:44
閱讀 2583·2019-08-30 14:10
閱讀 1328·2019-08-29 18:43
閱讀 2204·2019-08-29 13:26
