前端适配总结

1英寸 = 2.54cm

英寸

图片、电子屏幕就是由无数个像素组成

即具有特定颜色和位置的小方块

像素

垂直方向有 1136 个像素点

水平方向有 640 个像素点

iPhone SE 分辨率为 1136 x 640

指一个屏幕具体由多少个像素点组成

屏幕分辨率

原理同上

图片含有的像素数

图片分辨率

分辨率

举例 iPhone XS Max 官方信息

所以PPI越高，屏幕越清晰

每英寸包含的像素数

PPI

物理像素

把 2x2 个像素当 1 个像素使用

解决在相同物理大小的手机，不同分辨率的情况下，所显示的内容大小相同，清晰度不同

Retina Display(视网膜屏幕)

在Chrome中显示的 iPhone X：375x812 就是指设备独立像素

统一不同分辨率手机的单位，告诉其界面显示元素的大小，这个单位就是设备独立像素

设备独立像素（UX设计稿单位）

苹果提出Retina Display(视网膜屏幕)后，才有\"dpr\"的概念，在这之前移动设备是直接使用物理像素来进行展示

即 `物理像素/设备独立像素`

设备像素比（dpr）

此时网页宽度就是布局视口

布局视口

智能手机出现的早期状况

此时通过屏幕看到的区域就是视觉视口

视觉视口

移动端发展到现在

用户不需要进行左右移动或放大缩小就可以浏览网页内容

理想视口

视口

px 是屏幕上用来显示内容的最基本的点

绝对长度单位和相对长度单位

px 是一个绝对长度单位

px (pixel)

总结: 1pt = ppi / 163 (px)

ios中最小开发长度单位

pt (point)

计算公式: 1dp = ppi / 160 (px)

安卓的最小开发长度单位

dp

px、dp、pt

基本概念

使用插件\"postcss-px-to-viewport\"将页面中的px统一转为vw或者vh

px转vw

在使用\"postcss-px-to-viewport\"插件将页面px转为vw时，处理部分内容从px转为vh，可使用VsCode插件\"px2xx\"快速转换

部分px转vh

safe-area-inset-top

safe-area-inset-right

safe-area-inset-bottom

safe-area-inset-left

安全区域距离常量

使用env函数、constant函数获取安全距离

刘海屏安全区域

@media screen and (max-width: 450px) { /* 小屏对应样式 */ } @media screen and (min-width: 450px) { /* 更大屏幕的对应样式 */ }

对不同的屏幕大小设定不同的样式内容

媒体查询@media

开发组件时，需要考虑到对于不同屏幕的适配，往往我们会在mounted函数中对传入的组件宽高进行等比转换。当前屏幕下该组件宽度 = (传入组件的元素宽度/标准设计稿宽度) * 变化的屏幕宽度 

组件开发中等比缩放

默认，不保证保持原有的比例，内容拉伸填充整个内容容器

fill

保持显示整个图片，变换图片宽高

contain

保持图片宽高不变，变换显示图片核心部分

cover

保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些

scale-down

保留原有元素内容的长度和宽度，也就是说内容不会被重置

none

object-fit

图片的伸缩设置

解决方案

结合Less中Maps映射

结合Maps映射，可以将每一个div整体进行描述

使用less变量和calc函数计算

window.orientation:获取屏幕旋转方向

JS

@media screen and (orientation: portrait) { /*竖屏...*/ } @media screen and (orientation: landscape) { /*横屏...*/ }

CSS

监听旋转

横屏竖屏样式变换

.avatar {    background-image: -webkit-image-set( \"conardLi_1x.png\

通过设置image-set

通过媒体查询\"-webkit-min-device-pixel-ratio: 2 / 3\"分情况设置不同的图片<background-image: url(xxxx);>

media查询

<img src=\"xxx1.png\" srcset=\

设置secret

相比于位图（png、jpg），svg图片描述图片形状，体积小，不失真

使用SVG图片

图片模糊问题

扩展优化

前端适配总结