Equal to the computed value of "font-size" on the root element
rem是CSS3新增的相對(duì)長(zhǎng)度單位土匀，是指相對(duì)于根元素html的font-size計(jì)算值的大小谤牡。簡(jiǎn)單可理解為屏幕寬度的百分比蛉迹。
REM瀏覽器支持情況
與em相同的是它們都是使用元素設(shè)定字體大小纵柿，不同的是em是根據(jù)父級(jí)元素設(shè)置大小题翰。而rem在根據(jù)指定html根元素的字符大小而定的秉宿，從IE6到Chrome中先煎，默認(rèn)根元素的font-size都是16px的。如果想要設(shè)置12px的字體大小也就是12px/16px = 0.75rem茅逮。
- 由于
px是相對(duì)固定單位璃赡，字號(hào)大寫直接被定死，無(wú)法隨著瀏覽器進(jìn)行縮放献雅。 -
em和rem都是相對(duì)單位碉考，em是相對(duì)于其父元素的font-size，頁(yè)面層級(jí)越深挺身，em換算越復(fù)雜侯谁，麻煩。 -
rem直接相對(duì)于根元素html章钾，避開(kāi)層級(jí)關(guān)系墙贱，移動(dòng)端新型瀏覽器對(duì)其支持較好。
單位轉(zhuǎn)換
使用em可改變HTML的默認(rèn)font-size贱傀，如果設(shè)置為62.5%惨撇，則表示將默認(rèn)字體大小從16px修改為10px，即10px / 16px = 62.5%府寒。
html{
font-size:62.5%;
}
前端適配是為了讓設(shè)計(jì)稿在大部分設(shè)備上得到一致性的展示
強(qiáng)制meta viewport寬度為設(shè)計(jì)稿寬度
問(wèn)題是某些瀏覽器的webview中會(huì)出現(xiàn)兼容問(wèn)題魁衙，且對(duì)于1像素會(huì)無(wú)法渲染报腔。使用rem自適應(yīng)布局
在背景和字體上存在某些問(wèn)題
不同分辨率下的font-size
制作案例
設(shè)計(jì)稿與制作稿
備注說(shuō)明
- 設(shè)計(jì)稿尺寸為750x1180
- 適配除了iPadPro上邊距有些問(wèn)題其他基本合格
- 真機(jī)尚待測(cè)試
注意事項(xiàng)
- JS代碼在CSS之前加載
- 換算方案使用JS后計(jì)算尺寸后，將對(duì)應(yīng)的像素尺寸除以100得到
rem單位剖淀。 - CSS RESET添加設(shè)置了HTML字體初始值和Body字體的初始值纯蛾，已避免JS無(wú)法接在等問(wèn)題。
頁(yè)面結(jié)構(gòu)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="format-detection" content="telephone=no"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta http-equiv="Cache-Control" content="no-cache" />
<title>room</title>
<script></script>
<style></style>
</head>
<body>
<div class="fixed-top bg bg-main"></div>
<div class="contianer">
<div class="bg title member"></div>
<div class="userlist">
<div class="useritem">
<img src="./assets/img/room/avatar.png" class="avatar"/>
<p>玩家昵稱</p>
</div>
<div class="useritem">
<img src="./assets/img/room/avatar.png" class="avatar"/>
<p>玩家昵稱</p>
</div>
<div class="useritem">
<img src="./assets/img/room/avatar.png" class="avatar"/>
<p>玩家昵稱</p>
</div>
<div class="useritem">
<img src="./assets/img/room/avatar.png" class="avatar"/>
<p>玩家昵稱</p>
</div>
<div class="useritem">
<img src="./assets/img/room/avatar.png" class="avatar"/>
<p>玩家昵稱</p>
</div>
<div class="useritem">
<img src="./assets/img/room/avatar.png" class="avatar"/>
<p>玩家昵稱</p>
</div>
<div class="useritem">
<img src="./assets/img/room/nopic.png" class="avatar"/>
<p>玩家昵稱</p>
</div>
<div class="useritem">
<img src="./assets/img/room/nopic.png" class="avatar"/>
<p>玩家昵稱</p>
</div>
</div>
<div class="bg title info"></div>
<div class="bg match"></div>
<div class="fixed-bottom">
<a href="javascript:;" class="bg btn-join" id="join">加入游戲</a>
<a href="javascript:;" class="bg btn-download" id="download">下載游戲</a>
</div>
</div>
</body>
</html>
自適應(yīng)腳本
/**
* REM自適應(yīng)
* designWidth 設(shè)計(jì)稿實(shí)際寬度
* maxWidth 制作稿的最大寬度
* */
;(function(designWidth, maxWidth){
var docEle = document.documentElement;
//設(shè)置viewport
var meta;
var viewportContent = "width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover";//viewport-fit=cover用于適配iphoneX
meta = document.querySelector("meta[name=viewport]");
if(meta){
meta.setAttribute("content", viewportContent);
}else{
meta = document.createElement("meta");
meta.setAttribute("name","viewport");
meta.setAttribute("content", viewportContent);
if(docEle.firstElementChild){
docEle.firstElementChild.appendChild(meta);
}else{
var div = document.createElement("div");
div.appendChild(meta);
document.write(div.innerHTML);
div = null;
}
}
//創(chuàng)建REM樣式
var styleEle = document.createElement("style");
if(docEle.firstElementChild){
docEle.firstElementChild.appendChild(styleEle);
}else{
var div = document.createElement("div");
div.appendChild(styleEle);
document.write(div.innerHTML);
div = null;
}
//等待viewport設(shè)置好后執(zhí)行refreshRem
var refreshRem = function(){
var width = docEle.getBoundingClientRect().width;
maxWidth = maxWidth || 540;//限制在540的屏幕下纵隔，這樣100%就跟10rem不一樣了
width > maxWidth && (width = maxWidth);
var rem = width * 100 / designWidth;
styleEle.innerHTML = "html{font-size:"+rem+"px !important;}";
};
refreshRem();
//事件監(jiān)聽(tīng)
var timeID;
window.addEventListener("resize", function(){
clearTimeout(timeID);//防止執(zhí)行兩次
timeID = setTimeout(refreshRem, 300);
},false);
window.addEventListener("pageshow", function(evt){
//瀏覽器后退時(shí)重新計(jì)算
if(evt.persisted){
clearTimeout(timeID);
timeID = setTimeout(refresh, 300);
}
},false);
//事件監(jiān)聽(tīng)
var defaultFontSize = "16px";
if(document.readState === "complete"){
document.body.style.fontSize = defaultFontSize;
}else{
document.addEventListener("DOMContentLoaded", function(evt){
document.body.style.fontSize = defaultFontSize;
}, false);
}
})(720, 750);
重置樣式
/*reset css*/
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;font-size:50px;}
body{line-height:1.5;font-size:16px;}
body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',5FAE8F6F96C59ED1,5B8B4F53,sans-serif;}
b,strong{font-weight:bold;}
i,em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
table th,table td{border:1px solid #ddd;padding:5px;}
table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
img{border:0 none;width:auto;max-width:100%;vertical-align:top;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
@media screen and (-webkit-min-device-pixel-ratio:0){
input{line-height:normal!important;}
}
select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video,progress{display:inline-block;}
頁(yè)面樣式
/*page css*/
body{
background-color:#6A3B27;
}
.fixed-top{
position:fixed;
top:0;
left:0;
z-index:-10;
zoom:1;
}
.bg{
background-repeat:no-repeat;
background-size:cover;
background-position:center 0;
}
.bg-main{
width:100%;
min-width:7.2rem;
height:100%;
max-height:11.8rem;
overflow:hidden;
background-image:url("./assets/img/room/bg.jpg");
}
.fixed-bottom{
position:fixed;
bottom:0;
left:0;
right:0;
z-index:20;
}
.fixed-bottom>a{
width: 50%;
height:100%;
min-height:1.1rem;
line-height: 1.1rem;
overflow:hidden;
cursor:pointer;
display:block;
text-indent:-99rem;
text-align:center;
float: left;
}
.fixed-bottom>.bg.btn-download{
background-image:url("./assets/img/room/download.png");
}
.fixed-bottom>.bg.btn-join{
background-image:url("./assets/img/room/join.png");
}
.title{
position:absolute;
width:3.54rem;
height:0.67rem;
left: 50%;
margin-left:-1.77rem;
z-index:10;
}
.title.member{
top:2.42rem;
background-image:url("./assets/img/room/room_member.png");
}
.title.info{
top:6.98rem;
background-image:url("./assets/img/room/room_info.png");
}
.userlist{
z-index:10;
position:absolute;
top: 3.25rem;
width:6.4rem;
left: 50%;
margin-left:-3.2rem;
display:block;
}
.userlist .useritem{
width:1.6rem;
float:left;
text-align: center;
}
.userlist .useritem p{
color:#EEDF9C;
margin:0 auto;
text-align:center;
font-size:0.22rem;
}
.userlist .useritem .avatar{
width:1.37rem;
margin: 0 auto;
}
.match{
z-index: 10;
position: absolute;
top: 7.74rem;
height: 2.77rem;
width: 6.42rem;
left:50%;
margin-left:-3.21rem;
background-image:url("./assets/img/room/room_table.png");
}
