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


    解析:

        首先,rem是以html为基准。

        一般的,各大主流浏览器的font-size默认值为16px,此时1rem=16px。如果此时将rem与px进行换算很麻烦,比如0.75rem=12px。

        为了更方便的进行换算(比如1:10),就可以加样式:

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

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

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

        至于选择62.5%而非10px的原因,主要是兼容性和未来发展趋势的综合考虑,px这个单位的含义已经越来越混乱,几乎无法评估以后的设备是会一直像现在这样对网页上的px做兼容处理,还是让px回归“像素”的本意,

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

    应用: 

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

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

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

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

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

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

    作者:smile.轉角

    QQ:493177502

  • 相关阅读:
    XJ20夏令营做题记录(长期更新)
    洛谷P6623——[省选联考 2020 A 卷] 树
    [游记] 2020ZJOI 爆零记
    CF1017G——The Tree
    CF715E—— Complete the Permutations
    学习笔记——树的初步整理
    学习笔记——DP初步整理
    洛谷P5290——春节十二响
    POJ3017——Cut the Sequence(单调队列+堆优化DP)
    Java控制整形输入的法子
  • 原文地址:https://www.cnblogs.com/websmile/p/9263287.html
Copyright © 2020-2023  润新知