rem與px 的換算
- 計算公式: 元素的寬度(或高度) / html元素(跟标簽)的font-size = rem;
- 舉例 元素的寬度是 200px, html的font-size是100px, 那麼元素寬度的rem大小 = 200/100 = 2rem
移動端自适應網頁的編寫
- 自适應: 當螢幕的像素變大的時候,字型和元素也響應變大
- 什麼是視口: 移動裝置上的viewport就是裝置的螢幕上能用來顯示我們的網頁的那一塊區域
- 代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 視口寬度與裝置寬度一樣 禁止使用者縮放 -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Document</title>
<style>
// 當我們拖動網頁或者剛改手機的時候,html的font-size會發生改變
html {
font-size: 100px;
}
body {
font-size: 16px;
}
h1 {
font-size: 0.12rem;
}
// 試試手機為ip6plus和ip5時,div的寬高各是多少(px)
div {
width: 1rem;
height: 1rem;
background: gray;
line-height: 1rem;
}
</style>
</head>
<body>
<script>
function resetWidth() {
// 相容ie浏覽器 document.body.clientWidth
var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(baseWidth);
// 預設的設定是375px(ip6)的根元素設為100px, 其他的手機都相對這個進行調整
document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'
}
resetWidth();
window.addEventListener('resize', function () {
resetWidth();
})
</script>
<div>
内容
</div>
</body>
</html>
![移動端網頁一鍵轉為雲文檔，告别手動複制粘貼[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)