移动端适配方案
-
为什么要做移动端适配？
- 我们开发使用px（CSS pixel）的是
逻辑像素，以至于在不同分辨率的设备上同一个UI设计图展示效果会被伸缩变形，所以需要做移动端适配
- 我们开发使用px（CSS pixel）的是
-
通过历史进程进一步认识！
- 早期诺基亚板砖机时代，样式直男单一、设备少（哪种设备需要即去重新开发一套即可），此时的
设备像素比被通俗地固定在1（分辨率：物理像素/发光点），当后续各式尺寸、各式屏幕大小出现，希望能通过一套代码自适应不同设备（摸鱼就是第一生产力）
伟大的乔布斯提出了retina display 视网膜屏可以多个物理像素（2*2）构成一个逻辑像素。所以接下来针对不同分辨率的设备，都可以通过处理设备像素比达到统一逻辑像素分辨率
- 早期诺基亚板砖机时代，样式直男单一、设备少（哪种设备需要即去重新开发一套即可），此时的
rem、vw、vh：（等比例缩放）
1 rem = 1 * ducument.ducumentElement.style.fontSize 大多数浏览器默认为 HTML标签 font-size 为 16 px
// 进行一个监听配置
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; // 核心代码，这里的值可以自定义设置
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
<meta name="viewport" content="width=device-width, initial-scale=1.0"> width可以设置定值，调整initial-scale控制缩放比例
vw、vh
1vw = width * 1% 1vh = height * 1% （这里都是视图宽高）
百分比布局方案
距离写 百分比 width : 80%;
px （像素 Pixel ）
物理像素：屏幕上的真实可显示的像素点(每一个点可单独显示各种颜色，不可在分割)
逻辑像素：2px ==2逻辑像素长度 ，相当于对物理像素点做了一个抽离、压缩
设备像素比： 物理像素/逻辑像素
----------------------------------------分隔线------------------------------------------------------------------
浏览器根元素/html的font-size 默认是 16px
px 相对逻辑像素长度，写完了就会固定
由于相对于逻辑分辨率 那逻辑分辨率变化就会引起差错
em 相对当前dom对象的font-size属性，如无则寻找最近的有font-size的父元素
依赖当前dom元素或父元素的font-size 一旦需要调整，找父元素的font-size很麻烦
rem 相对于根html（html文件最外层的html标签）元素的font-size属性
需考虑整体
----------------------------------------分隔线------------------------------------------------------------------
代码测试
html {
font-size: 10px;
}
#t1 {
width: 90px;
height: 50px;
background-color: crimson; }
#t2 {
font-size: 5px;
width: 10em;
height: 10em;
background-color: darkred;
margin-left: 2em;}
#t3 {
font-size: 50px;
padding-top: 2rem;
width: 6rem;
height: 6rem;
border: 1px solid black;
}
#t4 {
width: 100%;
height: 100%;
background-color: darkblue;}
</style>
<body>
<div id="t1"></div>
<div id="t2"></div>
<div id="t3">
<div id="t4"></div>
</div>
vw\vh都是相对于 视口
桌面端：浏览器的可视区域(winow.innerHeight)
移动端： Viewport中的Layout Viewport
vw：1vw等于视口宽度的1%
vh：1vh等于视口高度的1%
vmin：选取vw和vh中最小的那个
vmax：选取vw和vh中最大的那个
----------------------------------------分隔线------------------------------------------------------------------
代码测试
#t5 {
width: 10vw;
height: 10vh;
background-color: darkslateblue;}
#t6 {
width: 10vmax;
height: 10vmin;
background-color: darkturquoise;}
<div id="t5"></div>
<div id="t6"></div>
<script>
console.log(window.innerHeight);
</script>
