移动端适配让你一看就懂!

时间:2021-1-9 作者:admin

❀一些听起来复杂的概念

物理像素(physical pixel):粗暴的理解就是屏幕上的点点,能够显示颜色的最小的一个电子元器件,真实存在的东西!同个尺寸大小的手机分辨率不同,意思就是面积相同屏幕上存在的点点的多少不同,代表的屏幕点点的数量。

(以下是两个屏幕物理像素不同的设备↓)

**设备独立像素(density-indenpendent pixel):**css中设置的像素(px)指的就是该像素。很早之前在没有Retina屏幕之前,设备独立像素与物理像素是相等的关系,也就是说1px对应的就是移动端上的真实存在的一个物理点点,所以问题就来了 (⊙_⊙)?

带来的问题:从最初的颗粒感相当大的屏幕,到720P再到1080P,甚至现在的4K屏幕,手机的物理分辨率越来越大了,这样就暴露出来一个问题,如果我们的手机分辨率翻倍,尺寸不变,设备独立像素与物理像素是相等关系的前提下,我们的图像不就会被成倍的缩小吗?不用担心,乔布斯想到了一个概念那就是『逻辑分辨率』

关于逻辑分辨率:乔布斯在iPhone4的发布会上首次提出了Retina Display(视网膜屏幕)的概念,在iPhone4使用的Retina显示屏幕中,把2×2个物理像素当一个像素来使用,意思就是1px的内容被呈现在4个物理像素上,这样让屏幕看起来更精致,但是元素的大小确不会改变。从此以后高分辨率的设备多了一个逻辑像素,这些设备逻辑像素的差别虽然不会跨度很大但是仍然有点差别,于是便诞生了移动端页面需要适配这个问题,既然逻辑像素由物理像素得来,那他们就会有一个像素比值,就叫做:『dpr』

例如:

我们能看到iPhoneX和iPhone6/7/8的横向逻辑像素都是375

iPhoneX因为实际尺寸要长一点所以它的纵向逻辑像素自然会长一点,iPhoneX比iPhone6/7/8的屏幕实际物理像素要高很多,所以屏幕看起来更精致,dpr也就更高

!!!所以逻辑分辨率我理解它就是一个体现了设备实际屏幕大小的单位:

❀实际适配的方式

一些打脑壳的概念:

viewport基础:viewport中文就是“视口”的意思,也就是浏览器中用于显示网页的区域。

在PC端其大小就是浏览器可视区域的大小,所以我们也不会太关注此概念。

在移动端绝大多数情况下 layout viewport(实际布局的范围)都大于浏览器可视区,那么就会有滚动条了,所以不管layout viewport、visual viewport、ideal viewport这些复杂的概念只要第一步将viewport设置为可见区域的范围就对了 ↓

  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover" />

**—接下来是真正的适配环节↓—-**

!!!等比缩放型:rem布局(flexibel属于rem布局)、vw+vh布局

1.等比缩放—flexible:是阿里早起开源的一个移动端适配解决方案,引用flexible后使用rem布局,rem是html结构中根元素的font-size大小,假如根元素的font-size:14px,那么在html结构中1rem就是14px,2rem就是28px,flexible做的事情就是把根元素的font-szie设置成屏幕的十分之一,默认使用750的设计图来进行布局,flexibel根据设备的尺寸设置动态设备的根元素的font-size大小

已知1rem = 屏幕的十分之一大小
20px : 750px  =  ?? : 10rem
那么设计图上的20px在移动设备上等于  20 / 75 rem

所以flexibel就只做了一件事:动态设置根元素的font-size

2.等比缩放—vw

css有了新的单位vw,vh,1vw是屏幕宽度的1%,1vh是屏幕高度的1%

vw不好算,在项目过程中可以使用插件来实现px到vw的转换

那么问题又来了???↓

❀最后的思考

用户买更大尺寸的移动设备是为了看更大的字吗?好像大都是为了看到更多的内容,所以经过分析发现如果设计图的尺寸对应设备的逻辑分辨率,px搭配flex流式布局可能呈现出来的效果是最切合用户使用习惯的,而不是看到等比放大的内容。

over

(╹▽╹)卑微菜鸟且玻璃心写的不好请轻轻喷,哪里不对请指正我马上改、感谢阅读~唛

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。