移动端1px像素实现技巧 - 讲解篇

移动端1px像素问题 - 解决办法：

---

DPI介绍：

• 定义： DPI 表示（每英寸点数）图像每英寸长度内的点数。

  DPI（Dots Per Inch，每英寸点数）是一个量度单位，用于点阵数码影像，指每一英寸长度中，取样、可显示或输出点的数目。

• 举例说明： DPI是打印机、鼠标等设备分辨率的度量单位。是衡量打印机打印精度的主要参数之一，一般来说，DPI值越高，表明打印机的打印精度越高。

  DPI是指每英寸的像素，也就是扫描精度。DPI越低，扫描的清晰度越低，由于受网络传输速度的影响，web上使用的图片都是72dpi，但是冲洗照片不能使用这个参数，必须是300dpi或者更高350dpi。例如要冲洗46英寸的照片，扫描精度必须是300dpi，那么文件尺寸应该是(4300)(6300)=1200像素*1800像素。

---

因为安卓、苹果手机等设备的手机dpi不同！

• 导致PC端视觉为1像素，但是在苹果手机上却是2px像素。
  所以要解决1px像素问题，就需要结合CSS伪类和CSS缩放共同完成。

总的来说就是应用结合了：

• css伪类 :before、:after

• css缩放 transform:scaleY(参数)

---

附 · 仅本地项目参考 · 案例涉及知识点：

1. styl样式文件的引入与使用

   // index.js引入使用
   import 'common/stylus/index.styl';
   

2. webpack配置路径： 'common': resolve('src/common')

   // webpack.base.config.js文件配置
   // 部分代码，示例如下：
   resolve: {
       extensions: ['.js', '.vue', '.json'],
       alias: {
         'vue$': 'vue/dist/vue.esm.js',
         '@': resolve('src'),
         'common': resolve('src/common')
       }
     },
   

3. 调用class类 ： class="tab border-1px"

4. 热更新

---

以上就是关于“ 移动端1px像素实现技巧 - 讲解篇 ” 的全部内容。