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