移动端适配方案
- 格式：pdf
- 大小：106.86 KB
- 文档页数：2
移动端适配⽅案为什么要做移动端适配？
我们开发使⽤px（CSS pixel）的是逻辑像素，以⾄于在不同分辨率的设备上同⼀个UI设计图展⽰效果会被伸缩变形，所以需要做移动端适配通过历史进程进⼀步认识！
早期诺基亚板砖机时代，样式直男单⼀、设备少（哪种设备需要即去重新开发⼀套即可），此时的设备像素⽐被通俗地固定在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);
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;}
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;}
