-
为什么要做移动端适配?
- 我们开发使用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>
https://juejin.cn/post/6953091677838344199#heading-12
https://juejin.cn/post/6844903631993454600#heading-16