【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
【angularjs】使用ionic+angular 搭建移动端项目,字体适配的更多相关文章
- 【angularjs】使用angular搭建PC端项目,开关按钮
方法一(使用指令) 1.指令(angular-ui-switch.js) angular.module('uiSwitch', []) app.directive('switch', function ...
- ionic环境搭建及新建项目中的各种问题
具体流程可见http://bbs.ionic-china.com/read-7.html 问题1.安装ionic cordova失败 解决方法:修改npm的源,npm config set regis ...
- 【angularjs】使用angular搭建项目,pc端实现网页中的内容不可复制
实现目标:不可复制页面内容 js: <script language="javascript"> if (typeof(document.onselectstart) ...
- 【angularjs】使用angular搭建项目,实现隔行换色
描叙:使用ng-class实现每隔3行换色 代码: <!DOCTYPE html> <html ng-app="myApp"> <head> & ...
- 【angularjs】使用angular搭建项目,获取dom元素
方法一:需要引入jq,否则会报angularJS1 Error: [jqLite:nosel](不建议使用) <div id="testID" class="tes ...
- 【angularjs】使用angular搭建项目,滚动距离
常用方法 滚动到顶部:$ionicScrollDelegate.scrollTop();或者$ionicScrollDelegate.$getByHandle('视图句柄').scrollTop(); ...
- 【angularjs】使用angular搭建项目,图片懒加载资料
demo: <ion-view view-title="{{chat.name}}"> <style type="text/css"> ...
- 【web】使用ionic搭建移动端项目 icon-radio 标签在ios下全部选中的问题
这块css 导致的问题 .disable-pointer-events { pointer-events: none; }
- Angularjs和Ionic框架搭建webApp
本文原创版权归 简书作者 噜啦啦噜啦啦噜啦噜啦噜 所有,转载请联系作者获得授权,并于文章开头标注原创作者及出处,以示尊重! 文/噜啦啦噜啦啦噜啦噜啦噜(简书作者)原文链接:http://www.jia ...
随机推荐
- HTTP与HTTPs的区别?
简而言之: HTTPS = HTTP + SSL HTTP 的 URL 以 http:// 开头,而 HTTPS 的 URL 以 https:// 开头 HTTP 是不安全的,而 HTTPS 是安 ...
- PHP全路径无限分类原理
全路径无限分类:以一个字段把他所有的父级id按顺序记录下来以此实现的无限分类叫做全路径无限分类 优点:查询方便 缺点:增加,移动分类时数据维护时稍微复杂.
- CSS3动画属性:动画(animation)
一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
- Java 开源博客 Solo 1.9.0 发布 - 新皮肤
这个版本主要是改进了评论模版机制,让大家更方便皮肤制作,并发布了一款新皮肤:9IPHP. Solo 是一款一个命令就能搭建好的 Java 开源博客系统,并内置了 15+ 套精心制作的皮肤.除此之外,S ...
- Ubuntu快捷键、Ubuntu终端常用命令
Ubuntu快捷键 0.Ctrl + Alt + t 打开终端,在终端命令行操作 1. Ctrl + W: 关闭当前 Nautilus 窗口 2. Ctrl+T: 在 Nautilus 打开新的 Ta ...
- Java 一些知识点总结
本篇文章会对面试中常遇到的Java技术点进行全面深入的总结,帮助我们在面试中更加得心应手,不参加面试的同学也能够借此机会梳理一下自己的知识体系,进行查漏补缺(阅读本文需要有一定的Java基础).本文的 ...
- RMAN命令DELETE操作总结
本篇总结一下RMAN命令中的DELETE操作,DELETE命令用于删除RMAN备份记录以及相应的物理文件. To delete physical backups and copies as well ...
- [20181226]简单探究cluster table.txt
[20181226]简单探究cluster table.txt --//简单探究cluster table.以前也做过,有点生疏了. 1.环境:SCOTT@book> @ ver1PORT_ST ...
- shell编程-函数(九)
每种语言都有自己的函数,shell也不例外.支持函数,它可以将脚本程序划分成一个个相对独立的代码块,使代码的模块化,结构更加清晰,并有效地减少程序的代码量,提高代码的复用率. 函数格式 functio ...
- IOS UIWebView用法
转自猫猫小屋 IOS webview控件使用简介(一) IOS webview控件使用简介(二)–加载本地html