!function(n){
var e=n.document,
t=e.documentElement,
i=720,
d=i/100,
o="orientationchange"in n?"orientationchange":"resize",
a=function(){
var n=t.clientWidth||320;n>720&&(n=720);
t.style.fontSize=n/d+"px"
};
e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

方法2

window.onload = function(){
/*720代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是
为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
getRem(720,100)
};
window.onresize = function(){
getRem(720,100)
};
function getRem(pwidth,prem){
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
}

首先,先说一个常识,浏览器的默认字体高都是16px

基本思路就是:利用rem单位,就是相对于跟(html)字体的大小,来计算相应元素的宽高

一般将html的font-size设置为:20px或30px或50px或100px
还有利用浏览器默认自己大小(16px)也就是16px*62.5%=10px,这样就是html{font-size:62.5%;},而不是html{font-size:10px;}因为浏览器(PC)最小就是12px。这样一来1rem = 10px;
我们来简单的看一下:
<div id="wrap">
<div id="div1">我是一个div标签</div>
</div>
CSS设置样式 #wrap{
font-size: 20px;
}
#div1{
font-size: 1em;
width: 16em;
height: 2em;
background-color: lawngreen;
}

  

手机端rem 用法的更多相关文章

  1. 手机端rem简单配置相关

    手机端rem简单配置相关 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 ...

  2. 手机端rem如何适配_rem详解及使用方法

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...

  3. (淘宝无限适配)手机端rem布局详解(转载非原创)

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  4. 手机端rem适应

    这段时间做了几个手机版的项目,因为没有用框架,所以用rem来做适应,下面就分享一下 //第一种是比较简单的代码 (function(win) { resizeRoot(); function resi ...

  5. 手机端rem如何适配_rem详解及使用方法2

    作为一个前端开发人员,我们的任务是将UI设计师的图稿运用计算机语言呈现在用户面前.而现在的设备大小尺寸不一,近年来智能手机的普及更是让网页的用户大部分来源与手机,所以让不同大小的移动端屏幕都能较好的还 ...

  6. (淘宝无限适配)手机端rem布局详解

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  7. 移动端适配(手机端rem布局详解)

    1. 问题的引出 如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10 ...

  8. 手机端rem无限适配

    参考文档: http://blog.csdn.net/xwqqq/article/details/54862279 https://github.com/amfe/lib-flexible/tree/ ...

  9. 手机端rem自适应布局实例

    首先要书写核心js代码,控制住页面的初始大小:我是以750px(即iPhone6)的标准,设置font-size:100px:<script>        (function (doc, ...

随机推荐

  1. vue之v-for循环的使用

  2. 微信小程序总结

    一.基础用法: <navigator url='跳转页面组件'></navigator>用法和a标签差不多 <text></text>文本标签 < ...

  3. python面向对象和面向过程介绍与区别

    一.面向对象和面向过程的区别: a.面向过程: 1)根据业务逻辑从上到下写代码 2)开发思路是将数据和函数按照执行的逻辑顺序组织在一起 3)分开考虑数据与函数 定义性文字: 面向对象编程(Object ...

  4. Python基础6 面向对象

    本节内容 面向对象编程介绍 为什么要面向对象开发? 面向对象的特性:封装,继承,多态 类,方法 引子 假设现在我们需要开发一款简单的游戏,譬如叫做人兽战争.我们需要简单的2个角色,一个人,一个怪兽,而 ...

  5. CentOS 7安装Redis

    第一步:安装gcc依赖 先通过gcc -v是否有安装gcc,如果没有安装,执行命令 yum install -y gcc(yum install -y gcc-c++) 第二步:下载redis安装包 ...

  6. sqoop导数据

    1.添加oracle  jdbc驱动 https://blog.csdn.net/eason_oracle/article/details/76836758 2.

  7. C#解析"a=1&b=2&c=3"字符串,微信支付返回字符串,替换<br>为&

    原文来自: http://www.mzwu.com/article.asp?id=2802 C#可用: 若该字符串是使用Http Get发送,url?a=1&b=2&c=3,使用下边代 ...

  8. P2050 [NOI2012]美食节

    题目地址:P2050 [NOI2012]美食节 先来讲一下P2053 [SCOI2007]修车(如果会做请跳过) 同一时刻有 \(N\) 位车主带着他们的爱车来到了汽车维修中心.维修中心共有 \(M\ ...

  9. Latex自定义文档纸张大小

    \usepackage{geometry} \special{papersize=8.5in,11in}%纸张大小为8.5inch×11inch

  10. 【转】MySQL用户管理及SQL语句详解

    [转]MySQL用户管理及SQL语句详解 1.1 MySQL用户管理 1.1.1 用户的定义 用户名+主机域 mysql> select user,host,password from mysq ...