zoukankan      html  css  js  c++  java
  • 深入浅出之移动端屏幕适配(1)

    说到移动端:可以根据开发技术分,也可以根据操作系统来分,今天重点不是这个,是讲下使用CSS与Android如何进行屏幕适配。

    1.先来了解几个概念:CSS中的px,em,rem分别是啥东西?

    px:像素,如果像素要换算成物理长度,需要得到dpi(每英寸像素数)

    em:相对长度单位,大小相对于父级节点来说,

    rem:是CSS3新增的一个相对单位,这个单位引起了广泛关注。相对于根元素<html>,关于兼容性的问题,除了ie8及更早的版本,其他浏览器均支持

     

    2.Android:也有类似的单位,dp(dip),sp,px,了解前面几个单位之前先来了解下:

    分辨率:480*800 ,指的是x与y两个方向上的像素点的数量。

    屏幕尺寸:一般听到说手机4.7英寸或者5.2英寸,屏幕对角线的长度,这里还要说明下:1英寸(in)=2.54厘米(cm),因此上面的4.7*2.54=11.93cm。

    屏幕比例:对角线长度固定但长宽的长度是不确定的,因此有不同的比例。

    下面进入正题:

    px:像素

    dp:基于密度(density)的相对单位,与设备无关像素

    sp:与像素无关单位,用于字体大小

    density:比例值。

    对于第二个应该是有疑问的?‘密度‘是什么?它与dp的关系是怎样的?

    首先这个density‘密度‘的意思与物理中的密度有点不一样的,它是指一个比例值,计算方式为 DPI / (160像素/英寸) 。先讲后面的160像素/英寸,android默认的只有3个dpi,low、medium和high,对应 120、160、240,如果没有特别设置,所有的dpi都会被算成这3个,具体可以参考下这个帖子,http://android.tgbus.com/Android/tutorial/201103/347176.shtml,其中的default就是160。

    DPI是怎么计算的?其实根据上面讲的几点:屏幕分辨率480*800,屏幕尺寸4英寸,已经可以计算了,(480/4^2)+(800/4)^2开平方根;

    那么density的值应该为233/160=1.46

     px要怎么算?px=dp*density;结果是实际的像素点,由于density随着屏幕分辨率改变的比例值因此像素点会随之改变。

    下面一个部分直接引用:

    为啥 标准dpi = 160

      (1)Android Design [1] 里把主流设备的 dpi 归成了四个档次,120 dpi、160 dpi、240 dpi、320 dpi

      实际开发当中,我们经常需要对这几个尺寸进行相互转换(比如先在某个分辨率下完成设计,然后缩放到其他尺寸微调后输出),一般按照 dpi 之间的比例即 2:1.5:1:0.75   来给界面中的元素来进行尺寸定义。

      也就是说如果以 160 dpi 作为基准的话,只要尺寸的 DP 是 4 的公倍数,XHDPI 下乘以 2,HDPI 下乘以 1.5,LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 pixel 。

      但假设以 240 dpi 作为标准,那需要 DP 是 3 的公倍数,XHDPI 下乘以 1.333,MDPI 下乘以 0.666 ,LDPI 下除以 2

      而以 LDPI 和 XHDPI 为基准就更复杂了,所以选择 160 dpi

         (2)这个在Google的官方文档中有给出了解释,因为第一款Android设备(HTC的T-Mobile G1)是属于160dpi的。

    参考:http://www.cnblogs.com/yaozhongxiao/archive/2014/07/14/3842908.html

  • 相关阅读:
    图像处理检测方法 — SIFT和SURF
    代码题(31)— 有效的括号、括号生成、最长有效括号
    代码题(30)— 二叉搜索树、二叉树的最近公共祖先
    【angularjs】使用angular搭建项目,实现隔行换色
    【css3】nth-child
    【window】Windows10下为PHP安装redis扩展
    【css】3d导航效果
    【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果
    【js】横/纵向无缝滚动
    【angularjs】使用ionic+angular 搭建移动端项目,字体适配
  • 原文地址:https://www.cnblogs.com/lmf-techniques/p/6763263.html
Copyright © 2011-2022 走看看