首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

吃透移动端 1px的具体用法

Posted in HTML / CSS onDecember 16, 2019

最近在写移动端 H5 应用，遇到一个值得记录下来的点。现在从它的由来到实现，我们来聊一下移动端 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的具体用法 

吃透移动端 1px的具体用法 

吃透移动端 1px的具体用法 

开源库的解决方案

vant 组件库

跳去 github 查看相关代码

使用 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 组件库

跳去 github 查看相关代码

.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 等单位

总结

通过该文，你大概了解 1px 问题的来龙去脉了吧，也明白了如何解决相关问题，如果这票文章能解决你的疑问或者工作中问题，不妨点个赞收藏下。

由于技术水平有限，文章中如有错误地方，请在评论区指出，感谢！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

吃透移动端 1px的具体用法

- Author -

小锁君少

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
使用CSS3代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
H5新属性audio音频和video视频的控制详解（推荐）
Dec 09 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 #HTML / CSS
处理textarea中的换行和空格
Dec 12 #HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 #HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 #HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 #HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 #HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 #HTML / CSS
name_scope (1) SSH(3) mysql(6) 2022年7月新番(1) 神经网络(7) character(1) data(4) 字符集(1) OVERLORD(1) 数据表(1)
You might like
生成静态页面的PHP类
2006/11/25 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
yii用户注册表单验证实例
2015/12/26 PHP
range 标准化之获取
2011/08/28 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
JavaScript 七大技巧（一）
2015/12/13 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
JS异步文件上传（兼容IE8+）
2017/04/02 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
ALEX AND ANI：手镯，项链，耳环和更多
2017/04/20 全球购物
Bibloo荷兰：女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
极度干燥澳大利亚官方网站：Superdry澳大利亚
2019/03/28 全球购物
美术专业自荐信
2014/07/07 职场文书
企业党员个人自我评价
2014/09/20 职场文书
预备党员转正意见
2015/06/01 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL