設(shè)備像素和css像素
- web前端領(lǐng)域背伴，像素分為設(shè)備像素和CSS像素
- 在縮放比例為1:1的時候一個CSS像素的大小等于一個設(shè)備像素的大小废恋。
- 一個CSS像素的大小是可變的，比如用后縮放頁面的時候，實際上就是在縮小或放大CSS像素选侨，而設(shè)備像素?zé)o論大小還是數(shù)量都是不變的。
視口
- 在PC端然走，布局視口就是瀏覽器窗口
image.png
- 在移動端援制，視口被分為兩個：布局視口、視覺視口芍瑞。
image.png
- 移動端還有一個理想視口晨仑，它是布局視口的理想尺寸，即理想的布局視口拆檬。（注：理想視口的尺寸因設(shè)備和瀏覽器的不同而不同洪己，但這對于我們來說無所謂）
- 可以將布局視口的寬度設(shè)為理想視口
<meta name="viewport" content="width=device-width" />
設(shè)備像素比
- 公式成立的大前提：（縮放比例為1）
設(shè)備像素比(DPR) = 設(shè)備像素個數(shù) / 理想視口CSS像素個數(shù)(device-width) - 縮放：縮小放大的是 CSS像素
viewport適配
在設(shè)備像素比為2的情況下，一個CSS像素等于兩個設(shè)備像素
image.png
如果我們想讓 一個CSS像素的寬度 = 一個設(shè)備像素的寬度竟贯，我們就要將CSS像素縮小為原來的0.5倍答捕，實際上，我們縮小的倍數(shù) = 設(shè)備像素比的倒數(shù)屑那。
<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,user-scalable=no" />
image.png
當然這只是在設(shè)備被像素比為2的情況下拱镐，為了適應(yīng)所有的設(shè)備艘款，我們應(yīng)該用javascript代碼動態(tài)生成meta標簽：
<meta name="viewport" content="">
var scale = 1 / window.devicePixelRatio;//window.devicePixelRatio 的值為設(shè)備像素比。
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
viewport適配在不同設(shè)備的情況下痢站，元素的寬度是不會變的磷箕，所以元素不能根據(jù)設(shè)備進行等比縮放了。
rem等比適配
動態(tài)設(shè)置html字體大姓竽选：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
這里的話以iphone5為例岳枷，因為縮放0.5，所以clientWidth=640呜叫，因此1rem=64px;
方案：
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="" />
<style>
body{
margin: 0;
padding: 0;
}
.box{
width: 2.66666667rem;
height: 2.66666667rem;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
</script>
</body>
