中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

成都網(wǎng)站開發(fā)中常見的rem布局

2024-02-27    分類: 網(wǎng)站建設(shè)

今天創(chuàng)新互聯(lián)的網(wǎng)站開發(fā)工程師將為大家?guī)碓谌粘i_發(fā)中常見的rem布局設(shè)計,今天創(chuàng)新互聯(lián)則為大家分享一下常見的rem布局的設(shè)計經(jīng)驗,讓大家可以在日后的網(wǎng)站開發(fā)中更好的使用與再次開發(fā)。

網(wǎng)易的rem布局
隨著分辨率的增大,頁面的效果會發(fā)生明顯變化,主要體現(xiàn)在各個元素的寬高與間距。375680的比320680的導航欄明顯要高。能夠達到這種效果的根本原因就是因為網(wǎng)易頁面里除了font-size之外的其它css尺寸都使用了rem作為單位,比如你看導航欄的高度設(shè)置代碼:

header,footer{

height:.90rem;

}

網(wǎng)易頁面上html的font-size不是預先通過媒介查詢在css里定義好的,而是通過js計算出來的,所以當分辨率發(fā)生變化時,html的font-size就會變,不過這得在你調(diào)整分辨率后,刷新頁面才能看得到效果。你看代碼就知道為啥font-size是直接寫到html的style上面的了(js設(shè)置的原因). 這樣的話,每個頁面中的寬高以及具體值只要除以100即可,而根節(jié)點的字號則是font-size=deviceWidth / 6.4,頁面寬度如果是640px,則轉(zhuǎn)換之后是6.4rem。需要注意的是,字號需要額外的媒體查詢,而不是rem定的。

//字號單獨用px即可 ,這里建議大家用變量定義小中大正常集中字號常量就可以,不用每次去針對具體樣式做字號調(diào)整。

@media screen and (max-width:321px){

.m-navlist{font-size:15px}

}

@media screen and (min-width:321px) and (max-width:400px){

.m-navlist{font-size:16px}

}

@media screen and (min-width:400px){

.m-navlist{font-size:18px}

}

//設(shè)置基本的字號,基本元素取材除100即可得到rem的大小,當然也可以用16px換算改變根字號為6.25rem即可。因為還有很大比例的手機設(shè)計為320的,所以這里考慮為640的。當屏幕大于640的時候,不再放大,讓頁面處于水平居中640px顯示。

function fontAuto(){

var deviceWidth = document.documentElement.clientWidth;

if(deviceWidth > 640) deviceWidth = 640;

document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

}

fontAuto();

window.onresize=function(){

fontAuto();

}

阿里rem布局
淘寶的效果跟網(wǎng)易的效果其實是類似的,隨著分辨率的變化,頁面元素的尺寸和間距都相應變化,這是因為淘寶的尺寸也是使用了rem的原因。在介紹它的做法之前,先來了解一點關(guān)于viewport的知識,通常我們采用如下代碼設(shè)置viewport。

<metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">這樣整個網(wǎng)頁在設(shè)備內(nèi)顯示時的頁面寬度就會等于設(shè)備邏輯像素大小,也就是device-width。這個device-width的計算公式為:設(shè)備的物理分辨率/(devicePixelRatio * scale),在scale為1的情況下,device-width = 設(shè)備的物理分辨率/devicePixelRatio 。devicePixelRatio稱為設(shè)備像素比,每款設(shè)備的devicePixelRatio都是已知,并且不變的,目前高清屏,普遍都是2,不過還有更高的,比如2.5, 3 等,魅族note的手機還有6p的devicePixelRatio就是3。淘寶觸屏版布局的前提就是viewport的scale根據(jù)devicePixelRatio動態(tài)設(shè)置。js中可以通過devicePixelRatio拿到具體的設(shè)備數(shù)值。

1. 動態(tài)設(shè)置viewport的scale

var scale = 1 / devicePixelRatio;

document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

2.動態(tài)設(shè)置font-size

document.documentElement.style.fontSize=document.documentElement.clientWidth/10+'px';(3)布局的時候,各元素的css尺寸=設(shè)計稿標注尺寸/設(shè)計稿橫向分辨率/10 (4)font-size可能需要額外的媒介查詢,并且font-size不使用rem,這一點跟網(wǎng)易是一樣的。

備注:你也可以通過阿里的現(xiàn)成的解決方案去實現(xiàn),然后在預處理器中去處理px單位的字號<scriptsrc="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"

以上就是創(chuàng)新互聯(lián)為大家?guī)淼年P(guān)于成都網(wǎng)站開發(fā)中常見的rem布局的相關(guān)介紹,希望能夠幫助大家,在日后的開發(fā)中幫助到大家。

分享文章:成都網(wǎng)站開發(fā)中常見的rem布局
文章出自:http://m.rwnh.cn/news32/319082.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計公司、營銷型網(wǎng)站建設(shè)網(wǎng)站維護、關(guān)鍵詞優(yōu)化

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)
米脂县| 北碚区| 叶城县| 罗田县| 桂阳县| 香格里拉县| 苍南县| 龙井市| 嘉荫县| 明溪县| 鹿泉市| 盐津县| 张家川| 宜兰市| 通江县| 涪陵区| 高尔夫| 敦化市| 仪征市| 宁晋县| 莱州市| 三原县| 格尔木市| 阿克| 新巴尔虎左旗| 松原市| 沙洋县| 聂拉木县| 西平县| 舞阳县| 屯门区| 进贤县| 囊谦县| 德兴市| 称多县| 伽师县| 通榆县| 永清县| 昌黎县| 临沂市| 措美县|