移動端布局之動態(tài)rem的實現(xiàn)
我要評論動態(tài)rem
1. 首先我們先介紹當(dāng)下的長度單位
px 像素
em 一個M的寬度 / 一個漢字的寬度 1em == 自身的 font-size
rem 全稱 root em 是根元素（html)的 font-size
vh 全稱 viewport height 100vh == 視口高度
vw 全程 viewport width 100vw == 視口寬度
因為網(wǎng)頁的默認(rèn)font-size： 16px 所以1rem默認(rèn)是 16px chrome 的最小字體像素默認(rèn)是 12px
一個元素在沒有設(shè)置font-size的情況下會去繼承父元素的font-size
2. 移動端的布局
移動端的布局一般就兩種
- 一是整體縮放
- 二是百分比布局
先說整體縮放
整體縮放，其實就是將pc端的網(wǎng)頁縮小到手機端屏幕能看到網(wǎng)頁全貌的大小
蘋果手機剛出來時就是使用這種布局，蘋果公司研究發(fā)現(xiàn)世界上大多數(shù)的網(wǎng)頁寬度是980px，然而蘋果手機的寬度像素是320px，所以蘋果手機的瀏覽器用320像素的屏幕寬度去模擬980px的寬度，實現(xiàn)了整體縮放
為了看到效果，要將 <meta name="viewport"> 這一部分刪除
<style>
div{
width:980px;
margin:0 auto;
background:#f0f0f0;
}
ul{
list-style:none;
}
li{
float:left;
margin-left:10px;
}
clearfix::after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<div>
<ul>
<li>選項1</li>
<li>選項2</li>
<li>選項3</li>
<li>選項4</li>
<li>選項5</li>
<li>選項6</li>
</ul>
</div>
</body>
但這種整體縮放的用戶體驗并不好，所以pass，我們來講百分比布局
百分比布局
//百分比布局
<style>
.child{
background-color:#ccc;
text-align:center;
width:40%;
margin:10px 5%;
float:left;
}
.clearfix::after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="child">選項1</div>
<div class="child">選項2</div>
<div class="child">選項3</div>
<div class="child">選項4</div>
</div>
</body>
可以看到百分比布局能自動適應(yīng)屏幕寬度。
但是百分比布局有個缺點，寬度和高度不能做任何關(guān)聯(lián)
可以看上面的gif圖，寬度一直變長，然而高度沒有變化
為了讓選項方塊的高度是寬度的一半，實現(xiàn)該效果我們需要知道屏幕的寬度，再來確定選項的寬度和高度
這里可以使用vw，但vw的兼容性比較差，我們可以使用rem來代替vw
首先rem是以html的font-size為基準(zhǔn)的，所以我們可以讓html的font-size==pageWidth
<script>
let pageWidth = window.innerWidth;
document.write('<style>html{font-size:'+ pageWidth/10 +'px}</style>')
</script>
為了更好的使用rem,這里1rem等于屏幕寬度的10分之1。注意不能做到1rem==屏幕的百分之1。因為瀏覽器的最小 font-size是12px ;
按如上改動代碼
<style>
.child{
background-color:#ccc;
text-align:center;
width:4rem;
height:2rem;
margin:10px 0.05rem;
float:left;
line-height:2rem;
}
.clearfix::after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="child">選項1</div>
<div class="child">選項2</div>
<div class="child">選項3</div>
<div class="child">選項4</div>
</div>
</body>
效果入圖
可以看到寬度和高度都能按百分比變化了，但是我們會發(fā)現(xiàn)一個很麻煩的東西，設(shè)計師給我們的設(shè)計稿，我們卻必須把每個元素的像素單位換算為rem。這里我們就要scss來換算px了
3.scss動態(tài)換算px
@function pxToRem($px){
@return $px/$designWidth*10+rem;//10是把整個屏幕分為10rem
}
$designWidth:320;//設(shè)計稿寬度
.child{
background-color:#ccc;
text-align:center;
width:pxToRem(128);//4rem;
height:pxToRem(64);//2rem;
margin: 10px pxToRem(1.6);
float:left;
line-height:pxToRem(64);
}
.clearfix::after{
content:"";
display:block;
clear:both;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS3移動端vw+rem不依賴JS實現(xiàn)響應(yīng)式布局的方法
這篇文章主要介紹了CSS3移動端vw+rem不依賴JS實現(xiàn)響應(yīng)式布局的方法的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-23- felxbox布局是css3里新出的一個，它就是為了解決上述兩種方式的不足出現(xiàn)的，是比較完美的一個。目前移動端的布局也都是用flexbox。 這篇文章主要介紹了移動端優(yōu)先的flex三2018-10-29
- 現(xiàn)在有兩種rem布局的樣式控制，其中一種是通過css的媒體查詢，另外一種是通過引入js來控制，這兩種方法各有各的優(yōu)點，但是我還是喜歡用引入js的方法來實現(xiàn)rem布局2018-01-03
- 這篇文章主要介紹了詳解H5 活動頁之移動端 REM 布局適配方法的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-07
淺談移動端的自適應(yīng)布局問題(響應(yīng)式、rem/em、Js動態(tài))
本篇文章主要介紹了淺談移動端的自適應(yīng)問題(響應(yīng)式、rem/em、Js動態(tài)),非常具有實用價值，需要的朋友可以參考下2017-11-01- 針對Web移動端布局的那些事，為大家進(jìn)行詳細(xì)介紹，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-20
- Flexbox通常能讓我們更好的操作他的子元素布局,這里稍微來提煉一下移動端Web頁面的CSS3 flex布局快速上手指南,需要的朋友可以參考下2016-05-31
像素密度與CSS3的viewport在移動端Web響應(yīng)式布局中的運用
viewport是CSS3中調(diào)整縮放的利器,特別適用于移動端Web界面的操作與布局,接下來我們就來詳解像素密度與CSS3的viewport在移動端web響應(yīng)式布局中的運用.2016-05-27
