美文网首页
像素的那些事儿

像素的那些事儿

作者: 哈维尔23456 | 来源:发表于2018-09-26 17:43 被阅读0次

自从去年接触移动端页面开发,跟像素相关几个名词就像幽灵一样挥着不去,看了很多文章,始终不敢说真正理解了,每次碰移动端页面开发都心虚,整理一下,没事看看。

概念

逻辑像素:又称css像素,viewport中的一个小方格,css样式代码中使用的就是逻辑像素,一个抽象概念,并不存在

设备独立像素:与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总的概念 ( 看到这个名词就默认是逻辑像素就行)

物理像素:又称设备像素,显示器(手机屏幕)上最小的物理显示单元,常说的1080x1920像素分辨率就是用的设备像素单位

ppi(pixel per inch):表示每英寸所包含的像素点数目,数值越高,说明屏幕能以更高密度显示图像

dpr(device pixel ratio):设备像素比,代表设备独立像素到设备像素的转换关系,在JS中可以通过window.devicePixelRatio获取 。
dpr = 设备像素/设备独立像素

关系

PC端 - - 1个逻辑像素 = 1个物理像素(在100%,未缩放的情况下,如果缩放到200%,可以说一个逻辑像素 = 2个物理像素)

移动端 - - 移动端根据设备不同有很大差异,根据ppi或dpr可以得到不同的换算关系

用途

这些都是基础概念,是必须要理清的,明白了这些,要面对一个问题- 移动端适配。要真正做好移动端适配其实是件很麻烦的事情,因为android有着五花八门的机型,iphone又有大小屏。之前做过一个移动端项目是采用手淘H5页面的终端适配解决方案,基本思路是:
1、采用iphone6(dpr=2)作为设计和开发基准
2、定义一套适配规则,自动适配剩下的N种设备尺寸
--这套规则就是一套js代码,执行这个JS后,会在<html>元素上增加一个data-dpr属性,以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值,比如说2或者3,同时会给html加上对应的font-size的值,比如说75px。如此一来,页面中的元素,都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算,从而实现屏幕的适配效果。
-- 实际开发中,字体尺寸是根据上述data-dpr属性值来确定的,我们用sass写了一个全局mixin供其他页面使用

@mixin font-dpr($font-size){
  font-size: $font-size;
  [data-dpr="2"] & { font-size: $font-size * 2; }
  [data-dpr="3"] & { font-size: $font-size * 3; }
}

rem的尺寸计算:手淘将视觉稿宽度分为100份(主要是为了兼容vh和vw,尺寸单位,有兴趣的可以了解一下),每10份 = 1rem,代码实现:用sass写一个函数,全局使用

/**
* $px 逻辑像素值
* $base-font-size  rem基准值(计算方式类似于vw) html的font-size值: deviceWidth/100 *10
*/
@function px2em($px, $base-font-size: 124.2px) {
 @return ($px / $base-font-size) * 1rem;
}

--这套规则只对iOS设备进行dpr的判断,对于Android系列,始终认为其dpr1。所以无法完全适配繁杂的Android系列

3、特殊适配效果给出设计效果(这个没做过,技术上应该是采用媒体查询根据特例写特定样式)

移动端适配的东西很多,感兴趣的可以看一下参考文章,里面详细介绍了手淘的适配方案。

前进的路上有太多的变数,处变不惊,一步一个脚印才是真理,不断学习,不断进步。

参考文章:
CSS像素、设备独立像素、设备像素之间关系
使用Flexible实现手淘H5页面的终端适配

相关文章

  • 像素的那些事儿

    自从去年接触移动端页面开发,跟像素相关几个名词就像幽灵一样挥着不去,看了很多文章,始终不敢说真正理解了,每次碰移动...

  • 《汽车销售那些事儿》目录

    汽车销售那些事儿21汽车销售那些事儿20汽车销售那些事儿19汽车销售那些事儿18汽车销售那些事儿17汽车销售那些事...

  • iOS 截图的那些事儿

    iOS 截图的那些事儿 iOS 截图的那些事儿

  • 优秀且免费的照片库

    找优秀的照片是一件很痛苦的事儿。你经常会找到那些低像素的、初学者拍的照片和各种自拍照,要么就是这照片要花钱而你却没...

  • Runtime那些事儿(消息机制)

    Runtime那些事儿(消息机制) Runtime那些事儿(消息机制)

  • MVP那些事儿(1) 用场景说话

    目录 MVP那些事儿(1)……用场景说话 MVP那些事儿(2)……MVC架构初探 MVP那些事儿(3)……在And...

  • 原生App切图的那些事儿

    原生App切图的那些事儿 原生App切图的那些事儿

  • 《明朝那些事儿》目录

    《明朝那些事儿》:朱元璋逆袭成为皇帝(1) 《明朝那些事儿》:朱元璋逆袭成皇帝(2) 《明朝那些事儿》:朱元璋逆袭...

  • 汽车销售那些事儿13

    《汽车销售那些事儿》目录 汽车销售那些事儿14 汽车销售那些事儿12 因为上午的事情,店里进行调整,颜颜也得以按时...

  • 汽车销售那些事儿3

    《汽车销售那些事儿》目录 汽车销售那些事儿4 汽车销售那些事儿2 1 蝉鸣的季节里,空气中充满离别的味道。 校园里...

网友评论

      本文标题:像素的那些事儿

      本文链接:https://www.haomeiwen.com/subject/ktadoftx.html