对于现在不同尺寸的移动端屏幕，如果设置px来说实在有点影响用户体验，在小屏幕上太大，大屏幕上太小，不能实现响应式，所以就引进了rem的概念。

rem是相对于根元素<html>

在我的项目中就是用这样的一段js代码。

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1, user-scalable=no" />

将上面代码拷在html的head里，意思是可视区域的宽度等于设备的宽带，禁止缩放，最大缩放为1，最小也是1，默认比例是1.

 (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 = 100 * (clientWidth / 320) + 'px';

         };

     // Abort if browser does not support addEventListener

     if (!doc.addEventListener) return;

     win.addEventListener(resizeEvt, recalc, false);

     doc.addEventListener('DOMContentLoaded', recalc, false);

 })(document, window);

当设计给我psd时，测量文字为40px，html使用rem值40px/100 = 0.4rem。

rem其实不单只能使用在文字的单位，还可以用于height，width，padding，marigin,line-height等的单位。

移动端设置-----rem的更多相关文章

  1. 移动端自适应rem的设置

    一般所熟知的css样式大小单位有px,em. px:精确地描述元素大小,不随屏幕大小的变化而变化: em:相对于父元素的大小,如果有层层嵌套的话会导致这个值非常大或者非常小. 在写移动端页面的时候为了 ...

  2. 移动端适配rem为单位的rem.js及个别设备设置了大字体模式，导致页面变形的处理方式

    这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...

  3. Js动态设置rem来实现移动端字体的自适应

    //设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width( ...

  4. 移动端设置字体px转换rem的脚本

    (function (){ var _self = this; _self.width = 640;//设置默认最大宽度 _self.fontSize = 100;//默认字体大小 _self.wid ...

  5. 移动端使用rem时候动态设置html字体大小

      !(function(doc, win) { var docEle = doc.documentElement, evt = "onorientationchange" in ...

  6. 移动端适配 rem 设置

    refresh();    window.onresize = function(){      setTimeout(function(){        refresh();      },10) ...

  7. 移动端使用rem适配及相关问题

    移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...

  8. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

  9. 移动端使用rem同时适应安卓ios手机原理解析，移动端响应式开发

    rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 ...

随机推荐

  1. ansible使用文档

    假设A机器上安装ansible yum install ansible vim /etc/ansible/hosts 对每个主机加key认证ssh-copy-id -i ~/.ssh/id_rsa.p ...

  2. Scrum vs. PMP vs. PRINCE2的发展趋势图

    这时2013年来自Google Trends的两幅图,数据来自对“Jobs and Education”的统计,体现了这三种认证,或者视为三种项目实施方式的趋势. 下图是全球的趋势: 下图是美国的趋势 ...

  3. 【转】SpringMVC中DispatcherServlet配置中url-pattern 配置/*和/的区别

    原文地址:http://m.blog.csdn.net/blog/liuxiao723846/43733287 在使用springmvc时,都会在web.xml中配置一个dispatchservlet ...

  4. iOS 10 的坑：新机首次安装 app，请求网络权限“是否允许使用数据”(转)

    症状 iOS 10 之后,陆陆续续地有用户联系我们,说新机第一次安装.第一次启动的时候,app 首屏一片空白,完全没数据.kill 掉重新打开就好了. 一开始以为是用户网络情况不好,但随着越来越多的用 ...

  5. Linux常用的命令以及一些常见的问题

    常用的linux 命令   1查看Linux版本 1.1 查看linux的内核版本 uname -r 或者uname -a 1.2 查看linux的具体版本号 cat /proc/version 1. ...

  6. 兼容可控硅调光的一款LED驱动电路记录

    1.该款电路为兼容可控硅调光的LED驱动电路,采用OB3332为开关控制IC,拓扑方案为Buck: 2.FB1:磁珠的单位是欧姆,而不是亨利,这一点要特别注意.因为磁珠的单位是按照它在某一频率 产生的 ...

  7. HDU 1257 最少拦截系统【LIS】

    题意:类似于套娃娃,问最少需要多少个拦截系统. 思路: 假设已经有m个导弹拦截序列 r1:x11>=x12>=x13>=...>=x1n r1:x21>=x22>= ...

  8. ArrayList 保证多线程安全

    一:使用synchronized关键字 二:使用Collections.synchronizedList();使用方法如下: 假如你创建的代码如下:List<Map<String,Obje ...

  9. QuickHit游戏

    一 项目需求 根据输入速率和正确率将玩家分为不同级别,级别越高,一次显示的字符数越多,玩家正确输入一次的得分也越高.如果玩家在规定时间内完成规定次数的输入,正确率达到规定要求,则玩家升级(为了简单起见 ...

  10. AngularJS之开发组件的一些思路

    欢迎大家指导与讨论 : ) 一 .前言 由于笔者水平有限,在这里只是分享自己开发组件的一些思路~ 摘要:无UI组件类.有UI组件类.有UI组件类型2.欢迎拍砖吐槽 O(∩_∩)O 二 .无UI组件类 ...