rem布局可以等比例的縮放頁面(寬高都自適應,在移動端較好),用戶體驗相對百分比布局可能會更好一些
1 rem定義
rem（font size of the root element）是指相對于根元素的字體大小的單位，它是一個相對單位，
em（font size of the element）是指相對于當前元素的字體大小的單位，它也是一個相對單位，
【01-em布局存在問題.html】
- css
body{
font-size: 20px;/*此時在瀏覽器的除錯視窗改變這個值,會等比例放大和縮小*/
}
.box{
width: 25em;/* 500px*/
height: 25em;/*500px*/
border: 1px solid red;
margin: 2.5em auto;/*20px*/
}
.in{
width: 15em;/*300px*/
height: 15em;/*300px*/
border: 1px solid blue;
margin: 2.5em auto;/*20px*/
/*font-size: 20px;*/ /*這里加上這行布局就亂了*/
}
- html
<div >
<div >
全堆疊工程師,呸,全干工程師才對，
</div>
</div>
總結：不能用em來布局,而是通過rem來布局，em來布局,當前元素的font-size一改變,布局就亂了，
【02-rem布局.html】
將【01-em布局存在問題.html】這個例子中的css改成rem
html{
font-size: 20px;/*此時在瀏覽器的除錯視窗改變這個值,會等比例放大和縮小*/
}
.box{
width: 25rem;/* 500px*/
height: 25rem;/*500px*/
border: 1px solid red;
margin: 2.5rem auto;/*20px*/
}
.in{
width: 15rem;/*300px*/
height: 15rem;/*300px*/
border: 1px solid blue;
margin: 2.5rem auto;/*20px*/
font-size: 30px;/*加上這個布局也不會亂*/
}
2 rem實作回應式
因為rem的基準點是根元素html的字體大小，因此只需要設定不同螢屏的html的font-size大小不一樣就可以達到不同螢屏的適配了，
注意：
- 在設定背景圖片的時候一定要設定backgroud-size的rem,圖片才能實作回應式，
- 整體布局的時候不要使用rem,用rem整體布局會亂；比如一行放3個盒子或者n個盒子，可以使用百分比實作;rem只用來修飾font-size,height,width等等，
2.1 rem+媒體查詢實作
使用rem配合媒體查詢可以適配多個終端
// 320 360 375 384 400 414 424 480 484 540 720 750
@media (min-width: 320px) {
html {
font-size: 42.67px;
}
}
@media (min-width: 375px) {
html {
font-size: 50px;;
}
}
@media (min-width: 414px) {
html {
font-size: 55.2px;;
}
}
@media (min-width: 480px) {
html {
font-size: 64px;;
}
}
@media (min-width: 640px) {
html {
font-size: 85.33px;
}
}
@media (min-width: 750px) {
html {
font-size: 100px;;
}
}
優點：使用媒體查詢適配，速度快，
缺點：適配多個終端時，需要添加回應的代碼，
2.2 rem+JavaScript實作
原理：通過js監聽瀏覽器的寬度,動態設定html的font-size的值
一般情況下1rem的值設定為螢屏寬度的十分之一
// 1rem大小為 螢屏寬度1/10
// 動態監聽螢屏寬度變化，實時設定rem大小
function setRem() {
var w = window.innerWidth; //獲取螢屏寬度
//最大寬度限制
if (w > 640) {
w = 640;
}
//設定rem大小
document.documentElement.style.fontSize = w / 10 + 'px';
}
setRem();
//監聽瀏覽器視窗尺寸變化
window.onresize = setRem;
優點：直接適配所有的終端
缺點：必須在頁面加載之前設定html的font-size值，不然會出現文字大小調動的情況，
2.3 總結
rem+js的方式會更好一些
3 vscode的rem插件
px2rem插件可以快速的將px轉化成rem單位
使用方法
- 第一步：安裝插件,安裝完插件后需要重啟vscode
- 第二步：右擊插件--->擴展設定--->Root Font Size下輸入框中設定font-size即可
- 第三步：在樣式中輸入px時,在下拉選項中選擇轉化成rem即可
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/243202.html
標籤：其他
上一篇：收下這款 Vue 專案模版，它將讓你的開發效率在 2021 年提高 50%
下一篇：swiper插件簡單使用