【angularjs】使用ionic+angular 搭建移动端项目,字体适配

解析:html

    首先,rem是以html为基准。浏览器

    通常的,各大主流浏览器的font-size默认值为16px,此时1rem=16px。若是此时将rem与px进行换算很麻烦,好比0.75rem=12px。字体

    为了更方便的进行换算(好比1:10),就能够加样式:spa

    html,body{
      font-size: 62.5%;  
    }

    设置了62.5%之后就有 1rem=10px,便于用rem指定元素的尺寸(好比1.2rem=12px,1.4rem=14px),这样响应式的时候就能够直接改变font-size而无需计算其余各类样式中出现的尺寸了。设计

    用rem定义尺寸的另外一个好处是更能适应 缩放/浏览。htm

    至于选择62.5%而非10px的缘由,主要是兼容性和将来发展趋势的综合考虑,px这个单位的含义已经愈来愈混乱,几乎没法评估之后的设备是会一直像如今这样对网页上的px作兼容处理,仍是让px回归“像素”的本意,rem

  但62.5%表明默认字体尺寸的62.5%这个含义基本不会有混乱。响应式

应用: 兼容性

  html,body{
     font-size: 62.5%;  
  }

 ps:实际项目中uI给的设计图为二倍图,计算规则: 设计图尺寸/20 网页设计

 拓展:移动端的设计图为何是二倍图?

  网页设计图纸设计的是:物理像素,即:屏幕实际的像素点;

  移动端显示的是:逻辑像素,即:手机屏幕能够现实的像素点。

  例如:iPhone6 采用了 750*1334 分辨率的屏幕,逻辑像素是375*667。

 

做者:smile.轉角

QQ:493177502

相关文章
相关标签/搜索