前端屏幕适配
*对于移动端不需要考虑浏览器兼容；对于不同尺寸屏幕必须要兼容
1.移动端视口
1.1 像素
物理像素：固定不变的，一个屏幕的存在的像素点数
逻辑像素：浏览器给开发者书写的像素，css中1px指的就是1个逻辑像素
设备像素比：DPR = 物理像素/逻辑像素（这个值是设备厂商设置好的，不允许用户更改）
以iphone6为例：
物理像素：1334*750 = 1000500 个物理像素点
逻辑像素：667*375 = 250125 个逻辑像素点
1000500/250125 = 4 即1px的范围是4个实际的物理像素进项显示的，也就是DPR=2
1.2 视口（可见窗口）
<head>
<!-- 完美视口:默认就是撑满整个屏幕，按照可视窗口来渲染，不缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
2.移 动端屏幕兼容
要保证在不同的屏幕尺寸下，对应的页面布局不会发生变化
2.1 rem适配
// 监听窗口大小，实时改变html元素字体大小
window.onresize = ()=>{
// 手机屏最小在320，再小就不是手机了，需要另做处理，此处就不写了
// 100为设置的默认根元素字体大小，定100方便计算
// 375位设计稿尺寸
const htmlFontSize = document.documentElement.clientWidth*100/375
document.documentElement.style.fontSize = htmlFontSize + 'px'
}
// css部分重置下字体，不然很大
body{
font-size:16px
}
// 使用时按照rem单位书写css尺寸
3.媒体查询
利用css去捕获设备进行微调；通常都是用纯手机端兼容；还有响应式布局
@media screen and (min-width: 320px) {
// 这个选择器里书写的样式会在 最小是320的屏幕下生效
div{
width:100px;
height:100px;
}
}
扫一扫
639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
