1.rem的布局

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的興隆網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

em單位式參照元素自身的文字大小來設(shè)置尺寸，rem指的是參照根節(jié)點(diǎn)的文字大小，根節(jié)點(diǎn)值的是HTML標(biāo)簽，設(shè)置HTML標(biāo)簽的文字大小，其他元素相關(guān)尺寸設(shè)置用rem，這樣，所有元素都有了統(tǒng)一的參照標(biāo)準(zhǔn)，改變HTML文字的大小，就會改變所有元素用rem設(shè)置的尺寸大小。

例子：Ipet移動端頁面

    
  
      
    

    


        


            推薦
            窩
            街
            游戲
            更多
        
        

            房間
            商品
            收藏品
            角色
            設(shè)置
        
        

            

                

                

                

                

                

                

            
        
    
    


        好友
        發(fā)現(xiàn)
        我
    

css文件如下：

/ CSS Document /
/logo/
body{
margin: 0px;
}
.header{
height: 100px;
background-color: #FF0004;
}
.logo{
display: block;
width: 375px;
height: 100px;
margin: 0px auto 0px;
}
.clearfix:before{
content: "";
display: table;
}
/全屏背景/
.wrap{
/width: 100%;/
position: absolute;
left: 0; /把屏幕拉開/
top: 0;
right: 0;
bottom: 0;
background-color: #dfdfdf;
}
/中部塊/
.center{
background-color: #dfdfdf;
position: absolute;
left: 0;
right: 0;
top: 6.25rem;
bottom: 6.25rem;
overflow-y: auto; /滾動/
overflow-x: hidden; /不出現(xiàn)x軸滾動條/
}
.second{
height: 5rem;
background-color: #f5f5f4;
text-align: center;
line-height: 5rem;
font-size: 32px;
position: absolute;
right: 0;
left: 0;
}
.second a{
position: absolute;
text-decoration: none;
color: #97918d;
}
.second a:hover{
color: #dba675;
}
.second .a01{
left: 0.69rem;
}
.second .a02{
left: 6.25rem;
}
.second .a03{
right: 11rem;
}
.second .a04{
right: 5.25rem;
}
.second .a05{
right: 0.69rem;
}
.center .third{
height: 2rem;
background-color: #f5f5f4;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 5.25rem;
font-size: 18px;
line-height: 2rem;
}
.center .third a{
text-decoration: none;
color: #97918d;
position: absolute;
}
.center .third a:hover{
color: #dba675;
}
.center .third .a01{
left: 1.25rem;
}
.center .third .a02{
left: 6.25rem;
}
.center .third .a03{
left: 10rem;
}
.center .third .a04{
left: 15rem;
}
.center .third .a05{
left: 20rem;
}
.center .forth{
height: 22.8rem;
position: absolute;
top: 7.5rem;
left: 0;
right: 0;
/background-color: aqua;/

}
.center .forth ul{
height: 22rem;
width: 22.2rem;
margin: 0.625rem;
/background-color: antiquewhite;/
list-style: none;
padding: 0;
}
.center .forth ul li{
width: 6.8rem;
height: 10rem;
float: left;
background-color: gold;
margin-right: 0.5rem;
margin-top: 0.5rem;
}
.center .forth ul li a{
display: block;
height: 10rem;
background: url("../images/Ipet移動端網(wǎng)頁_01.png") left top no-repeat;
background-size: 6.8rem 10rem;
}
/底部塊/
.footer{
width: 100%;
height: 6.25rem;
background-color: #f5f5f4;
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
line-height: 6.25rem;
font-size: 32px;

}
.footer a{
/display: block;
float: left;/
text-decoration: none;
color: #97918d;
position: absolute;
}
.footer a:hover{
color: #dba675;
}
.footer .a01{
left: 2.2rem;
}
.footer .a02{
left: 10.5rem;
}
.footer .a03{
right: 2.2rem;
}

總結(jié)：排版的時候技巧缺乏，margin和position都不夠熟練，rem要學(xué)到j(luò)s才能實(shí)際應(yīng)用。缺少兩個工具，一個是rem轉(zhuǎn)換插件，二是js來實(shí)現(xiàn)等比縮放

方法：上一級的寬可以用百分比，下一級margin：auto可以居中，圖片就用background&background-size，文字居中使用text-align