資訊專欄INFORMATION COLUMN
摘要：前一段時間群里有人問我相關(guān)的問題一直想整理一下可是都忘記了今天終于抽出時間來整理一下相關(guān)知識點說到就要談到移動端布局現(xiàn)在很多人在移動端布局上面還是用我們先來談?wù)勏袼叵鄬挝婚L度相對于屏幕分辨率而言的我們?yōu)槭裁词褂玫恼Q生也是的推動完美解決了的
前一段時間群里有人問我rem相關(guān)的問題,一直想整理一下,可是都忘記了.今天終于抽出時間來整理一下相關(guān)知識點!
說到rem就要談到移動端布局,現(xiàn)在很多人在移動端布局上面還是用px,我們先來談?wù)刾x;px:像素(Pixel),相對單位長度,px相對于屏幕分辨率而言的.
我們?yōu)槭裁词褂胷em,rem的誕生也是webapp的推動,rem完美解決了webapp的屏幕適應(yīng)問題,大家都知道移動端設(shè)備屏幕大小各異,像素也是各個不同的,那么webapp使用px就相當(dāng)雞肋,因為大家都知道px是像素,由屏幕的分辨率決定,用px在很大程度上影響webapp的美觀.
下面介紹如何使用rem,首先我們得設(shè)置rem的初始值,然后我們每個尺寸按照這個初始值進(jìn)行換算得出rem值進(jìn)行布局.
1.媒體查詢
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
2.自動設(shè)置html的font-size
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + "px";
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);
3.designWidth:設(shè)計稿的實際寬度值，需要根據(jù)實際設(shè)置,maxWidth:制作稿的最大寬度值，需要根據(jù)實際設(shè)置
(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = "html{font-size:" + rem + "px;}";
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 設(shè)置好后才能執(zhí)行 refreshRem，不然 refreshRem 會執(zhí)行2次；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止執(zhí)行兩次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 瀏覽器后退的時候重新計算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112656.html
摘要：經(jīng)過半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁窗口大小改變時的列數(shù)自適應(yīng)。主要是對于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看...
摘要：使用進(jìn)行網(wǎng)易云音樂界面構(gòu)建和布局解析為什么要用進(jìn)行布局第一，布局需要清除浮動，很麻煩。剩下的部分切出來。解決動態(tài)的多屏幕適配問題提示動態(tài)計算參考代碼兼容性提示 使用flex進(jìn)行網(wǎng)易云音樂界面構(gòu)建和布局解析 1.為什么要用flex進(jìn)行webapp布局 第一，float布局 需要清除浮動，很麻煩。 第二，絕對定位需要考慮位置和空間占位 第三，元素垂直水平居中問題。 2.網(wǎng)易云音樂首頁分析 ...
摘要：真的是給我們新手學(xué)習(xí)移動端適配造成不少困惑英語真的很重要呀。細(xì)節(jié)高清屏上的處理其實并不是所有做移動端適配的人都一定會遇到這個問題。 一次搞清楚移動端這幾個坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準(zhǔn)備什么樣的設(shè)計稿 三、rem方案的原理和細(xì)節(jié) 高清屏上,位圖的處理 高清屏上,關(guān)于border: 1px的處理 移動端屏幕的自動適配的處理 移動端屏幕上字體大小的處理...
摘要：真的是給我們新手學(xué)習(xí)移動端適配造成不少困惑英語真的很重要呀。細(xì)節(jié)高清屏上的處理其實并不是所有做移動端適配的人都一定會遇到這個問題。 一次搞清楚移動端這幾個坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準(zhǔn)備什么樣的設(shè)計稿 三、rem方案的原理和細(xì)節(jié) 高清屏上,位圖的處理 高清屏上,關(guān)于border: 1px的處理 移動端屏幕的自動適配的處理 移動端屏幕上字體大小的處理...
閱讀 1650·2021-09-26 09:55
閱讀 1383·2021-09-23 11:22
閱讀 2742·2021-09-06 15:02
閱讀 2651·2021-09-01 11:43
閱讀 3971·2021-08-27 13:10
閱讀 3688·2021-08-12 13:24
閱讀 2079·2019-08-30 12:56
閱讀 3005·2019-08-30 11:22
