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

这篇具有很好参考价值的文章主要介绍了移动端1px-从基本原理到开源解决方案介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

基本概念

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

像素 :指在由一个数字序列表示的图像中的一个最小单元,单位是 px,不可再次分割了。

设备像素比(DPR): 设备像素比 = 设备像素 / 设备独立像素。
复制代码

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

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

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

参考数据

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

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

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

设计稿对比数据

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

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

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

移动端1px-从基本原理到开源解决方案介绍,HTML,css3,css,前端,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-从基本原理到开源解决方案介绍,HTML,css3,css,前端,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 等单位文章来源地址https://www.toymoban.com/news/detail-723557.html

到了这里,关于移动端1px-从基本原理到开源解决方案介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 面向教育行业的MDM(移动设备管理)解决方案

    学校和教育机构的移动设备管理 (MDM) 通过将智能设备配置为适合教育用途,支持通过这些设备进行学习。面向教育的 MDM 解决方案允许组织的 IT 管理员或教学人员管理有助于学习的设备,如智能手机、平板电脑、笔记本电脑、台式机和电视。实施 MDM 有助于正确设置学习环

    2024年02月08日
    浏览(42)
  • uniapp在安卓10+情况下移动文件的解决方案

    首先看一个简单的问题,就是uniapp如何将下载的图片保存到手机本地,直接看下面的代码 主要说明一个问题,就是安卓平台本地路径的问题, \\\'file:///storage/emulated/0/nameplate/\\\' + filename 这行代码实际上是在用户打开安卓手机文件管理器的根目录下的nameplate文件夹下下载指向imgU

    2024年02月02日
    浏览(52)
  • uniapp使用uni-swipe-action后右侧多了小于1px的间隙

    问题:uniapp使用uni-swipe-action后右侧多了小于1px的间隙。且在真机上没有问题,但是在微信开发者工具中有问题。 代码如下:在滑动滑块或者点击这个区域时,就会出现问题。   怀疑是,父级容器cart-box和子级uni-swipe-action宽度没有完全相等导致。而容器都没有设置固定宽度值

    2024年02月15日
    浏览(44)
  • MAC移动硬盘无法识别解决方案(超详细图文教程)

    目录 步骤1:先找到外接移动硬盘,在 Mac “终端”执行命令 步骤2:加载移动硬盘,可以在终端执行以下两个命令之一 步骤3:终止后台自动执行的“磁盘修复进程” 步骤4:手动执行磁盘修复命令 步骤5:Windows系统的磁盘修复 参考6:修复方案及相关命令详解     MAC系统下连

    2024年02月04日
    浏览(56)
  • 笔记本系统触摸板只能移动鼠标不能点击使用的解决方案

    如果触摸板完全失效,连移动都做不到,可以先用 360驱动大师 检查一下触摸板的驱动,因为硬件没有驱动是无法运行的。 如果驱动没有问题,那就是设置的问题了,直接说原因——鼠标的触击功能没有打开。 (我是小米笔记本,找到控制面板的方式可能和其它笔记本不一样

    2024年02月11日
    浏览(239)
  • 数据中台的开源解决方案

    大家好,我是脚丫先生 ~ 之前写过一个系列: 从0到1搭建大数据平台 虽然还没有完结…但是在建设指北数据中通的过程中,参考了很多方案。 也在逐步完善中… 这篇文章,想以经验总结,汇总下。「 希望能帮助到小伙伴们!!! 」 在之前写了一篇从0到1搭建大数据平台之

    2024年02月15日
    浏览(30)
  • 智能终端安全:应用安全技术—移动互联网信息安全解决方案(下)

    手机作为一个随身可移动的信息承载终端,面临着各种不同使用场景,灵活的可配置的信息安全策略和稳妥可靠的管理非常必要, 需要提供必要的云端安全管控能力。 此处提到的云端安全管控平台, 包括运营商针对移动互联网需求的网络安全设计和运营商安全能力开放、可

    2024年02月05日
    浏览(64)
  • 时间机器 Time Machine 三星T7 移动硬盘SSD解决方案

    时间机器 (Time Machine)可以将Mac电脑上的全部文件进行备份,可以使用 Mac内置硬盘 , 移动硬盘 或者 NAS 存储数据。 设备 :MacBook Air M1 系统 :macOS Big Sur 11.6 备份硬盘 :Samsung T7 SSD USB3.2 1T 时间机器使用的文件格式是macOS扩展格式,将整个硬盘格式化成此格式是不合适的,所以

    2024年02月04日
    浏览(42)
  • 智能终端安全:应用安全技术—移动互联网信息安全解决方案(上)

    移动互联网智能终端信息安全是一个整体的系统性课题,从技术角度来看,涉及到 终端硬件架构、内核和终端操作系统、应用等各个层面 。 同时,信息安全又是和用户自身需求紧密相关的需求驱动型课题,从用户角度来看,公众用户可能更关心通信安全和费用、反病毒和防

    2024年02月03日
    浏览(51)
  • MinIO:开源对象存储解决方案

    MinIO是一款开源的云原生对象存储解决方案,旨在提供高性能、可扩展和持久化存储服务。它兼容Amazon S3 API,可以轻松地集成到现有的应用程序中,为用户提供可靠的对象存储和数据管理。本文将介绍MinIO的基本概念、架构设计以及常见的应用场景,帮助读者了解和使用这个

    2024年02月16日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包