移动端rem用法总结
先介绍一下这个近年来突起的黑马
参考的是<html>这个标签的font-size。rem中的r就是root根的意思。
所以rem要比em好用的多，因为em参考的是父亲的字号，和rem永远参考的是根元素（html标签）的字号。
rem被发明，实际上是为了做字号的变化方便一点。
中国的前端工程师，发现，rem不仅仅可以用来设置字号。还可以用来设置任何需要长度的地方。比如：
width、height、line-hight、background-size、border-width。
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
第二种办法 来了
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
好了 大家赶紧去试试吧 如果有什么问题欢迎留言 新手总结 欢迎拍板
移动端rem用法总结的更多相关文章
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 关于移动端rem适配
var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...
- 第130天：移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 07. 如何实现移动端rem适配
如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- 移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
- 移动端rem适应布局
移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...
- 移动端rem适配&iOS兼容
移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...
- H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
随机推荐
- OC字符串处理
接到一个需求, 现有多个品牌的商品,使用字符串保存已选中的品牌,使用','隔开,可以反选. 分析问题可知: 1. 字符串由多个品牌名字组成,由 ',' 隔开. 2.如果选中的品牌不在字符串内,则拼接到 ...
- iOS之Custom UIViewController Transition
本文学习下自定义ViewController的切换,从无交互的到交互式切换. (本文已同步到我的小站:icocoa,欢迎访问.) iOS7中定义了3个协议: UIViewControllerTrans ...
- K3CLOUD开发-动态表单树形单据体实现银行交易对账
背景:系统手机开单生成销售单据,通过银行pos机收款,系统收款流水与银行流水可能存在差异,所以通过获取银行接口,获取消费信息自动插入到生产系统数据库,开发对账报表,实现差异汇总! 展示效果如下: 开发 ...
- JS判断两个数字的大小
javascript中定义的var类型是弱类型,默认是String类型,在比较两个数字大小的时候默认比较的是两个字符串,比如,在比较10和2时,按数字做比较10是比2大,可是按默认的字符串比较时,第一 ...
- Tarjan算法初探(3):求割点与桥以及双连通分量
接上一节Tarjan算法初探(2):缩点 在此首先提出几个概念: 割点集合:一个无向连通图G 若删除它的一个点集 以及点集中所有点相连的边(任意一端在点集中)后 G中有点之间不再连通则称这个点集是它的 ...
- ionic ios 打包发布流程
1.ionic cordova resources ios 在windows下 生成ios资源包 2.拷贝ionic 项目到mac电脑 不用拷贝platforms 并解压 3.正常情况下wido ...
- $.ajax 完整参数
jquery中的ajax方法参数 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意 ...
- 利用.htaccess文件将多个子域名解析至对应的子目录
对于不支持子域名解析但是支持 .htaccess 的主机来说,这个功能就非常有用了 假设有主域名 ppios.com,子域名 yspx.ppios.com 和 ask.ppios.com,设置结果为访 ...
- Mac使用bootcamp安装win系统花屏解决方法
15年11'乞丐版air装win屏幕花屏,很郁闷,先后找了网上很多方法,最终总结出了一个比较折中的方法,不玩游戏不使用大型3D的可以参考. 1 花屏现象 2 解决方法 2.1 禁用驱动 2.2 使用M ...
- #《JAVA程序设计》 20155214 实验五 网络编程与安全
<JAVA程序设计> 20155214 实验五 网络编程与安全 实验内容 掌握Socket程序的编写: 掌握密码技术的使用: 设计安全传输系统. 实验要求 要求一 结对实现中缀表达式转后缀 ...