rem結合css3原生函式, 完成移動端各類螢幕適配
摘要：
相信很多人接觸的第一個網頁尺寸單位是px, 表示一個畫素點的大小
我們收到的設計師的設計稿也是以px為標準
但手機的螢幕是大小不一的, 在iPhone8上展示的很好的效果, 在iPhone5s上可能就完全走了樣, 為了在不同尺寸的螢幕上,都有很好的展示效果, 我們需...
相信很多人接觸的第一個網頁尺寸單位是px, 表示一個畫素點的大小
我們收到的設計師的設計稿也是以px為標準
但手機的螢幕是大小不一的, 在iPhone8上展示的很好的效果, 在iPhone5s上可能就完全走了樣, 為了在不同尺寸的螢幕上,都有很好的展示效果, 我們需要對網頁進行縮放
rem是一個很有意思的單位, 1rem的尺寸等於html的 font-size 的尺寸, 也就如果
html{
font-size: 100px;
}
那麼, 1rem就等於100px
-
我們可以通過螢幕的寬度, 動態改變 html下font-size的大小, 從而實現網頁的縮放
-
calc是一個css3自帶的函式, 可以實現簡單的加減乘除(可以用來取代sass的部分功能)
-
rem與calc結合使用, 就可以用極簡單的程式碼實現,多種螢幕的適配
效果如圖所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何使用rem</title>
<script>
// 獲取裝置畫素比(dpr -> devicePixelRatio)
var dpr = window.devicePixelRatio;
// 動態設定裝置縮放比
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(metaTag);
</script>
<script>
// 動態設定html的字型大小(頁面寬度為1rem)
document.addEventListener('DOMContentLoaded', function(e) {
document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth + 'px';
}, false);
</script>
</head>
<body>
<style>
body{
text-align: center;
margin: 0;
padding: 0;
line-height: 0;
}
table{
width: 100%;
}
.icon{
width: calc(196rem / 375);
margin: calc(100rem / 375) 0 0 0;
}
.name{
margin: calc(30rem / 375) 0 0 0;
font-size: calc(30rem / 375);
line-height: calc(30rem / 375);
color: #64B587;
}
</style>
<table>
<tbody>
<tr><td><img src="girl.png" class="icon"></img></td></tr>
<tr><td><p class="name">Yara Barros</p></td></tr>
</tbody>
</table>
</body>
</html>
小結:
rem是一個動態定義的單位, 結合css3自帶的calc函式, 能讓我們寫一套程式碼, 輕鬆適配各種尺寸的螢幕, 另外, 寫calc函式的時候, 運算子前後一定要留空格哦~