解析:

    首先,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

【angularjs】使用ionic+angular 搭建移动端项目,字体适配的更多相关文章

  1. 【angularjs】使用angular搭建PC端项目,开关按钮

    方法一(使用指令) 1.指令(angular-ui-switch.js) angular.module('uiSwitch', []) app.directive('switch', function ...

  2. ionic环境搭建及新建项目中的各种问题

    具体流程可见http://bbs.ionic-china.com/read-7.html 问题1.安装ionic cordova失败 解决方法:修改npm的源,npm config set regis ...

  3. 【angularjs】使用angular搭建项目,pc端实现网页中的内容不可复制

    实现目标:不可复制页面内容 js: <script language="javascript"> if (typeof(document.onselectstart) ...

  4. 【angularjs】使用angular搭建项目,实现隔行换色

    描叙:使用ng-class实现每隔3行换色 代码: <!DOCTYPE html> <html ng-app="myApp"> <head> & ...

  5. 【angularjs】使用angular搭建项目,获取dom元素

    方法一:需要引入jq,否则会报angularJS1 Error: [jqLite:nosel](不建议使用) <div id="testID" class="tes ...

  6. 【angularjs】使用angular搭建项目,滚动距离

    常用方法 滚动到顶部:$ionicScrollDelegate.scrollTop();或者$ionicScrollDelegate.$getByHandle('视图句柄').scrollTop(); ...

  7. 【angularjs】使用angular搭建项目,图片懒加载资料

    demo: <ion-view view-title="{{chat.name}}"> <style type="text/css"> ...

  8. 【web】使用ionic搭建移动端项目 icon-radio 标签在ios下全部选中的问题

    这块css 导致的问题 .disable-pointer-events { pointer-events: none; }

  9. Angularjs和Ionic框架搭建webApp

    本文原创版权归 简书作者 噜啦啦噜啦啦噜啦噜啦噜 所有,转载请联系作者获得授权,并于文章开头标注原创作者及出处,以示尊重! 文/噜啦啦噜啦啦噜啦噜啦噜(简书作者)原文链接:http://www.jia ...

随机推荐

  1. 配置安全域名https申请免费证书并配置nginx运行环境

    补全信息时选项 在这一步需要去查看进度,下载对应文件上传到对应站点根目录里按照要求建的隐藏类型的文件 如下图 讲证书文件按照下面操作 进行配置项配置https 如下 详情下载附件 server { l ...

  2. express入门

    (1)express的安装 $ npm install express 或者 $ npm install -g express 或者 $ npm install express -gd 备注: -g ...

  3. 19 个常用的 JavaScript 简写方法

    来自:SangSir 链接:https://segmentfault.com/a/1190000012673854 原文:https://www.sitepoint.com/shorthand-jav ...

  4. 洛谷P5245 【模板】多项式快速幂(多项式ln 多项式exp)

    题意 题目链接 Sol \(B(x) = \exp(K\ln(A(x)))\) 做完了... 复杂度\(O(n\log n)\) // luogu-judger-enable-o2 // luogu- ...

  5. Android assets文件夹之位置放置和作用

    Android 的assets文件夹的放置位置,Eclipse创建项目时就生成了的,Android Studio则不太一样,AS可以包含几种方式, 1:可以在build.gradle文件下配置,加如下 ...

  6. 让bind函数支持IE8浏览器的方法

    bind函数在IE8下是不支持的,只需要在你的js文件中加入如下代码就可以支持IE8 //让bind函数支持IE8 if (!Function.prototype.bind) { Function.p ...

  7. wap2app(九)-- 使用mui.previewImage之后,页面a链接不能跳转

    使用Hbuilder的长按保存图片的预览图片之后,页面所有的a链接都不能跳转. 解决办法: 可以使用下面绑定tap利用js跳转,亲测有效. mui('body').on( 'tap' , 'a' , ...

  8. java垃圾回收机制GC

    记得第一次总结java 的GC的时候,是刚开始在课堂上学习GC的时候,那时候许老师第一节java课 课后老师说同学们可以去深入理解一下java的GC机制: 但是是花费了三四个小时,翻看了<Thi ...

  9. 章节七、4-Sets

    一.set中不允许存在相同的元素 package ZangJie7; import java.util.ArrayList; import java.util.HashSet; import java ...

  10. (网页)table加上分页,优点可随便加样式

    1.先有静态的页面: <div class="col-xs-12"> <table id="tbtablesaleinfo" class=&q ...