移动端1px-从基本原理到开源解决方案介绍

 1px 不够准确,应该说成 1 物理像素

  • 为什么有 1px 这个问题?
  • 实现 1px 有哪些方法?这些方法分别有哪些优缺点?
  • 开源项目中使用的哪些解决方案?
  • 如何在项目中处理 1px 的相关问题?

基本概念

首先,我们要了解两个概念,一个是像素(pixel)可以简写为px,另外一个是设备像素比(DPR)

像素 :指在由一个数字序列表示的图像中的一个最小单元,单位是 px,不可再次分割了。设备像素比(DPR): 设备像素比 = 设备像素 / 设备独立像素。
复制代码

下面我来简单解释下几个概念

  • CSS 像素 (虚拟像素):指的是 CSS 样式代码中使用的逻辑像素,在 CSS 规范中,长度单位可以分为两类,绝对单位以及相对单位。px 是一个相对单位,相对的是设备像素。
  • 设备像素 (物理像素):指设备能控制显示的最小物理单位,意指显示器上一个个的点。从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了,和屏幕尺寸大小有关。
  • 设备独立像素 (逻辑像素):可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如: CSS 像素),这个点是没有固定大小的,越小越清晰,然后由相关系统转换为物理像素。

也就是说,当逻辑像素是 1pt 时,在 DPR 为 2 的 设备上显示为 2px 的物理像素

参考数据

各种类型的 iphone 手机屏幕设备的参数

吃透移动端 1px,从基本原理到开源解决方案

注:这里的缩放因子呢,就是 DRP 的值

设计稿对比数据

吃透移动端 1px,从基本原理到开源解决方案

会有人好奇,为什么设计稿上显示是 750x1334 呢,这是因为设计稿是显示的物理像素

而我们 css 中的像素是逻辑像素应该为 375x 667,在编写代码时要将自定义宽度设置成 375px

吃透移动端 1px,从基本原理到开源解决方案

那么此时设计稿上的 1px 宽度实际代表的 css 参数应该是 0.5px 对应物理像素 1px,那么怎么实现这个物理像素为 1px 呢

实践

归根结底有两种方案,一种是利用 css 中的transfrom:scaleY(0.5),另一种是设置 媒体查询根据不同 DPR 缩放

解决方案一

原理

利用 css 的 伪元素::after + transfrom 进行缩放

为什么用伪元素? 因为伪元素::after或::before是独立于当前元素,可以单独对其缩放而不影响元素本身的缩放

伪元素大多数浏览器默认单引号也可以使用,和伪类一样形式,而且单引号兼容性(ie)更好些

实现

<div class="cell border-1px"> cell <div><style>
.cell {width: 100px;height: 100px;
}
<!--全部边框-->
.border-1px:after {content: '';position: absolute;box-sizing: border-box;top: 0;left: 0;width: 200%;height: 200%;border: 1px solid #000;border-radius: 4px;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: top left;
}<!--单边框,以上边框为例-->
.border-1px-top:before {content: "";position: absolute;top: 0;left: 0;right: 0;border-top: 1px solid red;transform: scaleY(.5);transform-origin: left top;
}
</style>

解决方案二(升级方案一)

原理

使用 less 对公共代码(方案一)封装,同时增加媒体查询分别对不同 DPR 的设备,进行不同的缩放

.border(@borderWidth: 1px; @borderStyle: solid; @borderColor: @lignt-gray-color; @borderRadius: 0) {position: relative;&:before {content: '';position: absolute;width: 98%;height: 98%;top: 0;left: 0;transform-origin: left top;-webkit-transform-origin: left top;box-sizing: border-box;pointer-events: none;}@media (-webkit-min-device-pixel-ratio: 2) {&:before {width: 200%;height: 200%;-webkit-transform: scale(.5);}}@media (-webkit-min-device-pixel-ratio: 2.5) {&:before {width: 250%;height: 250%;-webkit-transform: scale(.4);}}@media (-webkit-min-device-pixel-ratio: 2.75) {&:before {width: 275%;height: 275%;-webkit-transform: scale(1 / 2.75);}}@media (-webkit-min-device-pixel-ratio: 3) {&:before {width: 300%;height: 300%;transform: scale(1 / 3);-webkit-transform: scale(1 / 3);}}.border-radius(@borderRadius);&:before {border-width: @borderWidth;border-style: @borderStyle;border-color: @borderColor;}
}.border-all(@borderWidth: 1px; @borderStyle: solid; @borderColor: @lignt-gray-color; @borderRadius: 0) {.border(@borderWidth; @borderStyle; @borderColor; @borderRadius);
}

其他方案:

  • 使用图片:兼容性最好,灵活行最差,不能改变颜色、长度
  • 使用 viewport 和 rem,js 动态改变 viewport 中 scale 缩放,缺点在于不适用于已有的项目,例如:使用 vh 和 vw 布局的
<meta name="viewport" id="WebViewport" 
content="initial-scale=1, maximum-scale=1, 
minimum-scale=1, user-scalable=no"> 
  • 使用 css 渐变linear-gradient或者box-shadow

上述 3 种方案均有致命缺陷暂不推荐使用

兼容性

最后看一下兼容性如何,主要是伪元素、transform:scale 和min-device-pixel-ratio 这几个关键词的兼容性

吃透移动端 1px,从基本原理到开源解决方案

开源库的解决方案

vant 组件库

使用less写的


.hairline-common() {position: absolute;box-sizing: border-box;content: ' ';pointer-events: none;
}.hairline(@color: @border-color) {.hairline-common();top: -50%;right: -50%;bottom: -50%;left: -50%;border: 0 solid @color;transform: scale(0.5);
}

也是采用第一种解决方案

ant-design-mobile 组件库

.scale-hairline-common(@color, @top, @right, @bottom, @left) {content: '';position: absolute;background-color: @color;display: block;z-index: 1;top: @top;right: @right;bottom: @bottom;left: @left;
}.hairline(@direction, @color: @border-color-base) when (@direction = 'top') {border-top: 1PX solid @color;html:not([data-scale]) & {@media (min-resolution: 2dppx) {border-top: none;&::before {.scale-hairline-common(@color, 0, auto, auto, 0);width: 100%;height: 1PX;transform-origin: 50% 50%;transform: scaleY(0.5);@media (min-resolution: 3dppx) {transform: scaleY(0.33);}}}}
}.hairline(@direction, @color: @border-color-base) when (@direction = 'right') {border-right: 1PX solid @color;html:not([data-scale]) & {@media (min-resolution: 2dppx) {border-right: none;&::after {.scale-hairline-common(@color, 0, 0, auto, auto);width: 1PX;height: 100%;background: @color;transform-origin: 100% 50%;transform: scaleX(0.5);@media (min-resolution: 3dppx) {transform: scaleX(0.33);}}}}
}
.hairline(@direction, @color: @border-color-base) when (@direction = 'bottom') {border-bottom: 1PX solid @color;html:not([data-scale]) & {@media (min-resolution: 2dppx) {border-bottom: none;&::after {.scale-hairline-common(@color, auto, auto, 0, 0);width: 100%;height: 1PX;transform-origin: 50% 100%;transform: scaleY(0.5);@media (min-resolution: 3dppx) {transform: scaleY(0.33);}}}}
}.hairline(@direction, @color: @border-color-base) when (@direction = 'left') {border-left: 1PX solid @color;html:not([data-scale]) & {@media (min-resolution: 2dppx) {border-left: none;&::before {.scale-hairline-common(@color, 0, auto, auto, 0);width: 1PX;height: 100%;transform-origin: 100% 50%;transform: scaleX(0.5);@media (min-resolution: 3dppx) {transform: scaleX(0.33);}}}}
}.hairline(@direction, @color: @border-color-base, @radius: 0) when (@direction = 'all') {border: 1PX solid @color;border-radius: @radius;html:not([data-scale]) & {@media (min-resolution: 2dppx) {position: relative;border: none;&::before {content: '';position: absolute;left: 0;top: 0;width: 200%;height: 200%;border: 1PX solid @color;border-radius: @radius * 2;transform-origin: 0 0;transform: scale(0.5);box-sizing: border-box;pointer-events: none;// @media (min-resolution: 3dppx) {//   width: 300%;//   height: 300%;//   border-radius: @radius * 3;//   transform: scale(0.33);// }}}}
}

这个值得研究下,比 vant 和 第一种解决方案有点不同,主要在于处理了 DPR 为 2 和为 3 的两种情况,相比来说更加完善。

这里 PX 大写,为了防止插件将 px 转成 rem 等单位

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/162187.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

给cmd控制台程序 套壳 美化

给cmd控制台程序套壳美化&#xff0c;可以获取程序的标准输出和报错信息。 # _*_ coding: utf-8 _*_ """ 控制台程序启动器&#xff0c;杜绝黑窗口。 Time: 2023/10/18 15:28 Author: Jyun Version: V 0.1 File: main.py Blog: https://ctrlcv.…

Python中Numpy的应用技巧

目录 1. 什么是 NumPy?2. NumPy 中的数组2.1. 创建数组2.2. 用Numpy的数据2.2.1. OpenCV2.2.2. Pandas 3. 数学计算3.1. 四则计算3.1.1. 矩阵乘法3.1.2. 点乘 3.2. 求逆矩阵与伪逆矩阵3.3. 判断矩阵相等3.4. np.eye()函数生成对角阵 4. 统计4.1. 最大值、最小值、均值条件4.2.…

在 Python 中如何向列表或数组添加元素

在这篇文章中&#xff0c;你将了解 Python 中的 .append() 方法。你还会看到 .append() 与其他用于向列表添加元素的方法有什么不同。 让我们开始吧&#xff01; Python 中的列表是什么&#xff1f;给初学者的定义 编程中的数组是一个有序的项目集合&#xff0c;所有的项目都…

【Linux-常用命令-基础命令-解压rar文件-unrar-x-命令-笔记】

【Linux-常用命令-基础命令-解压rar文件-unrar-x-命令-笔记】 1、前言2、操作3、自己的操作 1、前言 最近&#xff0c;在使用Linux的时&#xff0c;使用相关基础命令是&#xff0c;总是容易忘记&#xff0c;上网一搜&#xff0c;大部分都写的比较繁琐&#xff0c;解压不同文件…

XCode15与iOS17/17.1 真机测试问题处理

XCode15与iOS17/17.1 真机测试问题处理&#xff0c;网上相关博客很多&#xff0c;摘录了如下实践后能起作用的地址如下&#xff1a;Xcode 15 报错处理 - 简书iOS17版本适配-CSDN博客 Xcode15适配-六虎 主要介绍下&#xff1a;Assertion failure in void _UIGraphicsBeginImag…

Linux编译内核添加Bcache模块

由于Bcache是在linux kernel 3.10之后才加入的&#xff0c;所以要使用Bcache&#xff0c;首先必须确保内核版本至少是3.10或及以上&#xff0c;可以使用uname -a查看内核版本 [rootceph01 ~]# uname -a Linux ceph01 4.18.0-305.3.1.el8.x86_64 #1 SMP Tue Jun 1 16:14:33 UTC…

在Linux中,怎么查看自己电脑的系统架构是什么?

2023年10月18日&#xff0c;周三晚上 这些命令会返回一个字符串&#xff0c;表示系统的架构。 常见的架构包括 x86&#xff08;32位&#xff09;、x86_64&#xff08;64位&#xff09;、ARM 等。 方法1&#xff1a;使用uname命令 uname -m方法2&#xff1a;使用arch命令 ar…

如何查看前端项目vue版本

&#xff08;1&#xff09;点击package.json文件 &#xff08;2&#xff09;找到dependencies下面的value &#xff08;2&#xff09;查看vue版本 2开头为vue2 3开头为vue3

从零开始了解协同OA办公系统,一篇文章就够了!

随着现代企业管理的不断发展&#xff0c;越来越多的企业开始关注协同OA办公系统&#xff0c;以提高工作效率和降低成本。但是&#xff0c;很多企业对协同OA办公系统并不了解&#xff0c;甚至不知道该如何开始使用。本文将从零开始&#xff0c;为大家详细介绍协同OA办公系统。 一…

【数据结构】排序算法的稳定性分析

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

Java使用javah命令:‘javah‘ 不是内部或外部命令,也不是可运行的程序或批处理文件。

前提是已安装jdk&#xff0c;配置JDK环境变量&#xff0c;并成功输出下图&#xff1a; 但在命令行窗口使用javah&#xff0c;找不到该命令&#xff1a; 原因&#xff1a;新版的Java不使用javah的命令了&#xff0c;而是使用javac -h 用法&#xff1a; javac -h <directory&…

软件测试全套教程,软件测试自学线路图

目录 一、简介 二、引言 为什么要做接口自动化测试&#xff1f; 为什么要自己写框架呢&#xff1f; 三、环境准备 四、测试接口准备 接口代码 接口信息 五、编写接口测试 测试思路 脚本实现 六、优化 封装接口调用 保持cookies&增加log信息 封装重复操作 七…

微信隐秘功能:如何巧妙隐藏好友和消息的方法教程

在日常使用微信的过程中&#xff0c;难免会有些私密内容或特定的联系人和群聊希望能够暂时隐藏起来&#xff0c;以保护个人隐私。幸运的是&#xff0c;微信提供了一些内置功能以及额外的工具&#xff0c;能够帮助我们实现这一目的。下面就来详细介绍一种简单易行的方法&#xf…

软件考试学习笔记(希赛)

软考学习笔记-软件设计师 1. 软考基本介绍1.1 软考分数制1.2软考考试分类介绍1.3软件考试报名网站1.4考试内容1.4.1上午考试内容-综合知识1.4.2下午考试内容-软件设计 2.数据的表示2.1进制转换2.1.1R进制------》十进制转换2.1.2十进制-----》R进制转换2.1.3二进制与八进制与16…

低代码如何赋能实体经济走向数实融合

数字工厂、智慧园区、智慧社区、数字乡村、智慧校园、数字化管理平台……当前&#xff0c;各行各业正在全面拥抱数字化。“数实融合”的浪潮持续高涨&#xff0c;企业数字化转型的呼声也不断走高。然而&#xff0c;当前实体经济和数字经济融合不全&#xff0c;数字技术未能深度…

SpringBoot+自定义注解+AOP高级玩法打造通用开关

1.项目结构 2.引入依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot<…

MySQL 查询 唯一约束 对应的字段,列名称合并

MySQL 查询 唯一约束 对应的字段&#xff0c;列名称合并 SELECT F.DbName,F.TableName,F.ConstraintName,GROUP_CONCAT(ColumnName) ColumnName FROM ( SELECT t1.TABLE_SCHEMA DbName, t1.TABLE_NAME TableName,t1.CONSTRAINT_NAME ConstraintName,t2.COLUMN_NAME ColumnNam…

UI自动化测试的痛点

当我们找工作的时候查看招聘信息发现都需要有自动化测试经验&#xff0c;由此看来测试人员不会一点自动化测试技术都不好意思说自己是做软件测试的。大部分测试人员也都是从使用自动化测试工具、录制回放、测试脚本、开发小工具入门自动化测试的&#xff0c;然后在慢慢的接触 U…

Rust-类型转换进阶

这篇文章收录于Rust 实战专栏。这个专栏中的相关代码来自于我开发的笔记系统。它启动于是2023年的9月14日。相关技术栈目前包括&#xff1a;Rust&#xff0c;Javascript。关注我&#xff0c;我会通过这个项目的开发给大家带来相关实战技术的分享。 关于Rust的类型转换&#xff…

美国绿氢项目开发商NovoHydrogen完成2000万美元融资

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;总部位于美国科罗拉多州戈尔登的绿氢项目开发商NovoHydrogen今日宣布已完成2000万美元融资。 本轮融资由现代能源公司领投。 该公司打算利用这笔资金进一步扩大其团队&#xff0c;并将其绿氢项目的…