移动端自适应和发丝线的实现

最新推荐文章于 2024-08-17 00:41:11 发布

刷题刷到手抽筋

最新推荐文章于 2024-08-17 00:41:11 发布

阅读量218

点赞数 1

文章标签：面试前端 javascript

本文链接：https://blog.csdn.net/doomliu/article/details/124770082

版权

本文深入探讨了移动端自适应的概念，包括像素、设备像素比、视网膜屏和meta viewport的设置。介绍了移动端自适应的常见方案，如vm和rem自适应，并详细讲解了0.5px（发丝线）的实现方法，包括使用transform、线性渐变、box-shadow等。同时，讨论了flexible.js在实现自适应和发丝线中的作用及其工作原理。

摘要由CSDN通过智能技术生成

本文介绍移动端的自适应、flexible.js的原理和发丝线的实现
首先我们需要了解相关概念

基本概念

像素

不同场景下像素的含义不同。

设备像素和图像像素

显示设备（显示器）是通过排列的显示器件来显示图像的，一个这样的显示器件称为一个“设备像素”。例如iPhone6横向375个像素，纵向667个像素。每个像素可以独立设置颜色。

图像像素指一个图像（位图）的最小展示单元，每个像素只能有一种颜色。

物理像素和逻辑像素

物理像素指的就是设备像素，一个设备的物理像素是它的固有属性，显示设备还会提供逻辑像素给应用程序使用，例如我们平时设置显示器的分辨率为1280 × 800或者1440 × 900，就是设置显示器横向和竖向展示逻的辑像素的个数。

我们在CSS中使用的px单位就是逻辑像素（页面缩放的话，CSS的px尺寸和逻辑像素会成一定比例）。

为什么需要逻辑像素呢？因为物理像素因设备而异，不同像素排列方式和密度不同，如果程序设置一个展示元素的尺寸使用物理像素，那么它在不同的设备的尺寸是有很大区别的。因此显示器提供逻辑像素，让程序可以定义“希望实际看到的元素尺寸”。例如，设备的分辨率是375 × 667，逻辑像素1个像素对应物理1个像素；如果设备分辨率是750 × 1334，那么这个屏设置1个逻辑像素对应4个物理像素，这样显示的元素在两个屏上看起来基本一样大了。

一个逻辑像素里可能包含1个或者多个物理像素点，包含的越多则图像看起来越清晰。

设备像素比

设备独立像素指独立于设备的像素，即设备无关的像素，即逻辑像素，设备像素比指

物理像素 / 设备独立像素

设备像素比越大，说明一个逻辑像素对应的物理像素越多，图像就会更清晰。

例如，有些移动设备的设备像素比是2，即2个物理像素的宽度等于一个逻辑像素宽度，这种设备叫“2倍屏”，也有“3倍屏”。

设备的设备像素比可以通过window.devicePixelRatio来获取。

视网膜屏（retina屏）

所谓“Retina”是一种显示技术，可以将更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素，也被称为视网膜显示屏。

Retina 既不是指分辨率，也不是单独指PPI，而是指视觉效果。其计算公式为（可以不用了解）：

a = acttan( h / 2d )

a 代表人眼视角，h 代表像素间距，d 代表肉眼与屏幕的距离。符合以上条件的屏幕可以使肉眼看不见单个物理像素点。这样的显示屏就可被苹果称作“Retina显示屏”。

简单地说，视网膜屏就是设备的分辨率很高的屏。

meta viewport

name为"viewport"的meta标签，可以设置viewport相关的属性。下面说明一下viewport的概念。

关于viewport，可以参考viewport深入理解，在这只简单介绍一下。

viewport（视口），指移动端设备的可视区域，这包含了两个方面，一个是我们可以在手机上看到的网页的大小（layout viewport），这个可以通过document.documentElement.clientWidth获取到。另一个是可视区的大小（visual viewport），可以通过window.outerWidth获取到。

手机visual viewport的大小各不相同（注意，这里的大小指的都是逻辑像素），通常手机默认的layout viewport的大小是980px或者1024px（也可能是其它值，这个是由设备自己决定的）。

手机默认的layout一般都和PC近似，而大于手机的可视区。这是为了让移动端显示PC的网页，PC的网页通常较大，超出移动端可视的范围就会产生滚动条。

如果我们设计专门的移动端的网页，不希望很大的layout viewport的尺寸，而是和移动端适配，不产生滚动条。那么可以设置name为"viewport"的meta标签。