首先需要说明一点，css像素不等同于物理像素，css像素是一个抽象单位，而物理像素是实实在在，大小固定的像素点。
まず、知っている4つの画素の携帯端末の必要性を行います
物理ピクセル
物理ピクセルとデバイス自体の実際のサイズによって決定される数。デバイスに依存しない画素
独立画素に係る装置は、固定された、独立した装置iPhone6画素に生じ、機器にもX 667 375です。あなたは、ブラウザの開発者モード、あなたが見ることができるモバイル最後に曲を開くと、それは重要なメディア、CSS、最終的な物理的なピクセルのピクセルに変換されます。CSSピクセル
コンセプトCSSピクセルブラウザ上で、フィッティングの前に行われていない、そしてユーザーが変更とCSSのピクセルサイズを拡大または縮小され、半分のダイムの実際の物理的な大きさとは何の関係もありません。最終的に、画像形成装置上の物理的なピクセルに変換されます。画素ビットマップ
物理複数の画素を表示するビットマップのピクセルが歪んされる場合、画素単位のサイズに関連する画像は、ただ一つの物理ピクセル画像上の画素のビットマップ場合、表示時間（好ましくはあります増幅）次の物理ピクセルビットマップは、複数の画素を要塞場合、それはシャープであろう。
第二に、画素比率
概念：物理画素数方向（X軸方向）には、個々の画素の必要な数は、一画面/機器を満たすために必要な
X軸iPhone6の物理学：次に、画素数比iPhone6に、良好です画素数は750であり、そしてX軸iPhone6 375のデバイスの個々の画素は、画素比率が375分の750 = 2であります
あなたは2以下の領域にキーを押すと
第三に、ビューポート
移动端是如何将PC端的站点放到屏幕里面显示而不产生横向滚动条的呢？
レイアウトビューポートの
各ブラウザベンダーのレイアウトビューポートのサイズは、PC側のスケーリングは、レイアウトビューポートに影響を与えますが、ページ要素を決定するか、またはレイアウトビューポートには影響しませんエンドズーム操作を移動し、行を変更したいデフォルト値を提供します。
一般的なPC側のページ960個のCSSピクセルビジュアルビューポート
彼の単位はCSSピクセルであるため、ページを拡大したとき、あなたは、画面上の画素領域をCSS、視覚的なビューポートの実際の面積は、実際に画面サイズであるが、その大きさが変化することは大きくなり、画面CSSの画素数が視覚的にビューポートのサイズが小さくなるので、徐々に少なくなって現れることができ、私はあなたがページを拡大するとしながら、値が減少しているときに、視覚的なビューポートのサイズをAPIを呼び出すことができ、これは誤謬であるとは思いません。デフォルトの終了モバイル、ビジュアルビューポートが980CSSピクセルであるあなたは、ページ全体の携帯端末の画面の役割を見ることができることを意味し、視覚的なビューポートは、ページ全体をラップするためです。- 個々の画素の装置のサイズに、ビューポートのサイズのレイアウト
<meta name="viewport" content="width = device-width"/>第四に、ズーム
- ユーザースケーリング
ユーザスケーリングの変更は、レイアウトビューポートを変更しない、視覚的なビューポートであります - システムスケーリング
スケーリング手段が配置されたシステム初期スケール= XXをズームシステムは、視覚的なレイアウトビューポートとビューポートが変更され、ズームインします
V.は、各ビューポートの幅を取得します
- レイアウトビューポート
let width = document.documentElement.clientWidth- ビジュアルビューポート
let width = window.innerWidth第六に、完璧なビューポートを設定します
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,maximum-scale=1">- 幅=画素サイズ独立した装置に装置幅レイアウトビューポートのサイズ。
- = 1ズーム比が1に設定されている最初のスケール、および視覚的なレイアウトビューポートとビューポートのサイズ画素サイズ独立した装置です。
- スケール= 1つの最大最大スケール= 1 IOSは、最大ズーム及び最小ズームを設定するので、最初のスケールをサポートしていません。
- ユーザースケーラブル= 0は、ユーザのズームを禁止します
七、適応
设置完完美视口就会产生一个问题：在不同设备上元素的高宽比不一样，因为不同的设备布局视口大小不一样，iPhone6为375 css单位 ，而iPhone6plus为414css单位，而你的代码写10px时，所占据的屏幕比例是不一样的，所以就需要我们做适配工作。適応方式レムの
完璧なビューポートを設定されている前提でレム適応は、レイアウトビューポートは、デバイスの幅が独立したピクセル幅になっ設定しました。そして、ラベルにフォントサイズなどレイアウトビューポート1/16としてレイアウトビューポートまたはレイアウトビューポートのサイズに何パーセントサイズ、そして16remは8remは半分の幅を占有し、画面全体の幅を占有します、彼らはすべてのデバイスで同じです。- 最も生々しいレム適応コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1,maximum-scale=1,user-scalable=0,maximum-scale=1">
<title>菜鸟教程(runoob.com)</title>
<style>
* {
margin: 0;
padding: 0;
}
.re {
width: 180px;
height: 8em;
background: #000;
}
</style>
</head>
<body>
<div class="re"></div>
</body>
<script>
// 将跟标签的字体大小设置为布局视口宽度
var rSize = document.documentElement.clientWidth;
console.log(rSize);
// 获取跟标签
var html = document.querySelector('html');
html.style.fontSize = rSize/16+'px';
// 以上代码会有一个问题：根标签的font-size有可能会被改变
// 所以要加上!important
let style = document.createElement("style")
let rSize = document.documentElement.clientWidth/16
// 16分之1的布局视口大小
style.innerHTML = "html{ font-size: "+ rSize + "px!important }"
document.head.appendChild(style)
</script>
</html>ビューポートの適応方式の
アイデアビューポート適応方式は、レイアウトビューポートの幅は、デザインの幅に設定されているが、電話は直接アンドリュースレイアウトビューポートの幅に許可されていないので、設定することにより、初期の規模は、レイアウトの値に応じて変化しますポートサイズは、値の大きさがある：個々のピクセル機器/画素ビットマップの設計- ビューポートの適応プログラムコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 先将设备独立像素大小赋值给布局视口值，之后替换掉 -->
<!-- 因为js暂时没法直接读取设备独立像素 -->
<meta name="viewport" content="width=device-width>
<title>菜鸟教程(runoob.com)</title>
<style>
* {
margin: 0;
padding: 0;
}
.re {
width: 180px;
height: 8em;
background: #000;
}
</style>
</head>
<body>
<div class="re"></div>
</body>
<script>
var target = 375;
var scale = document.documentElement.clientWidth/target;
console.log(scale)
var meta = document.querySelector("meta[name='viewport']")
meta.content = "initial-scale="+scale+",maximum-scale="+scale+",user-scalable=0,maximum-scale="+scale
</script>
</html>