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

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

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

header,footer{

height:.90rem;

}

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

//字號(hào)單獨(dú)用px即可 ，這里建議大家用變量定義小中大正常集中字號(hào)常量就可以，不用每次去針對(duì)具體樣式做字號(hào)調(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è)置基本的字號(hào),基本元素取材除100即可得到rem的大小，當(dāng)然也可以用16px換算改變根字號(hào)為6.25rem即可。因?yàn)檫€有很大比例的手機(jī)設(shè)計(jì)為320的，所以這里考慮為640的。當(dāng)屏幕大于640的時(shí)候，不再放大，讓頁(yè)面處于水平居中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)易的效果其實(shí)是類似的，隨著分辨率的變化，頁(yè)面元素的尺寸和間距都相應(yīng)變化，這是因?yàn)樘詫毜某叽缫彩鞘褂昧藃em的原因。在介紹它的做法之前，先來(lái)了解一點(diǎn)關(guān)于viewport的知識(shí)，通常我們采用如下代碼設(shè)置viewport。

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

1. 動(dòng)態(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.動(dòng)態(tài)設(shè)置font-size

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

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

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

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

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

廣告

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