前端适配总结
2022-09-22 10:43:18 18 举报AI智能生成
总结前端移动端适配适配问题
作者其他创作
大纲/内容
基本概念
物理像素
英寸
1英寸 = 2.54cm
像素
即具有特定颜色和位置的小方块
图片、电子屏幕就是由无数个像素组成
分辨率
屏幕分辨率
指一个屏幕具体由多少个像素点组成
iPhone SE 分辨率为 1136 x 640
垂直方向有 1136 个像素点
水平方向有 640 个像素点
图片分辨率
图片含有的像素数
原理同上
PPI
每英寸包含的像素数
所以PPI越高，屏幕越清晰
举例 iPhone XS Max 官方信息
sqrt(2688^2, 1242^2) / 6.5 = 455.54 (ppi)
Retina Display(视网膜屏幕)
解决在相同物理大小的手机，不同分辨率的情况下，所显示的内容大小相同，清晰度不同
把 2x2 个像素当 1 个像素使用
设备独立像素（UX设计稿单位）
统一不同分辨率手机的单位，告诉其界面显示元素的大小，这个单位就是设备独立像素
在Chrome中显示的 iPhone X：375x812 就是指设备独立像素
设备像素比（dpr）
即 `物理像素/设备独立像素`
苹果提出Retina Display(视网膜屏幕)后，才有"dpr"的概念，在这之前移动设备是直接使用物理像素来进行展示
视口
布局视口
此时网页宽度就是布局视口
视觉视口
此时通过屏幕看到的区域就是视觉视口
智能手机出现的早期状况
理想视口
用户不需要进行左右移动或放大缩小就可以浏览网页内容
移动端发展到现在
px、dp、pt
px (pixel)
px 是屏幕上用来显示内容的最基本的点
px 是一个绝对长度单位
屏幕横向、纵向分布的px数量,叫做“分辨率”, 比如 1920 * 1080 的含义: 纵向分布 1920 个px, 纵向分布 1080 个px
pt (point)
ios中最小开发长度单位
在163ppi时, 1pt = 1px
总结: 1pt = ppi / 163 (px)
dp
安卓的最小开发长度单位
计算公式: 1dp = ppi / 160 (px)
解决方案
px转vw
使用插件"postcss-px-to-viewport"将页面中的px统一转为vw或者vh
部分px转vh
在使用"postcss-px-to-viewport"插件将页面px转为vw时，处理部分内容从px转为vh，可使用VsCode插件"px2xx"快速转换
刘海屏安全区域
使用env函数、constant函数获取安全距离
安全区域距离常量
safe-area-inset-top
safe-area-inset-right
safe-area-inset-bottom
safe-area-inset-left
媒体查询@media
对不同的屏幕大小设定不同的样式内容
@media screen and (max-width: 450px) { /* 小屏对应样式 */ }
@media screen and (min-width: 450px) { /* 更大屏幕的对应样式 */ }
@media screen and (min-width: 450px) { /* 更大屏幕的对应样式 */ }
组件开发中等比缩放
开发组件时，需要考虑到对于不同屏幕的适配，往往我们会在mounted函数中对传入的组件宽高进行等比转换。当前屏幕下该组件宽度 = (传入组件的元素宽度/标准设计稿宽度) * 变化的屏幕宽度
图片的伸缩设置
object-fit
fill
默认，不保证保持原有的比例，内容拉伸填充整个内容容器
contain
保持显示整个图片，变换图片宽高
cover
保持图片宽高不变，变换显示图片核心部分
scale-down
保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些
none
保留原有元素内容的长度和宽度，也就是说内容不会被重置
扩展优化
使用less变量和calc函数计算
结合Maps映射，可以将每一个div整体进行描述
1. 提高代码可读性, 将每个元素对象化, 用属性描述各个部分
2. 提高程序维护性, 如果后期UX对某一个关联样式宽高进行修改,不采用这样的方式是很难在几百行、几千行的CSS代码中去寻找px的关联加减, 从而导致漏改或错改
横屏竖屏样式变换
监听旋转
JS
window.orientation:获取屏幕旋转方向
CSS
@media screen and (orientation: portrait) { /*竖屏...*/ }
@media screen and (orientation: landscape) { /*横屏...*/ }
@media screen and (orientation: landscape) { /*横屏...*/ }
图片模糊问题
通过设置image-set
.avatar {
background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png" 2x );
}
background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png" 2x );
}
media查询
通过媒体查询"-webkit-min-device-pixel-ratio: 2 / 3"分情况设置不同的图片<background-image: url(xxxx);>
设置secret
<img src="xxx1.png" srcset="xxx2.png 2x, xxx3.png 3x">
使用SVG图片
相比于位图（png、jpg），svg图片描述图片形状，体积小，不失真
0 条评论
下一页
