对于现在不同尺寸的移动端屏幕，如果设置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. Play Framework 完整实现一个APP（四）

    上一篇最后出现的错误是因为断言 assertEquals(1, Post.count()); 出错,取到的Post的数量不是1,运行Test之前,表中有数据 可以添加以下方法,运行Test前清空数据 ...

  2. <<你的灯亮着吗?>>读书笔记

    本书是美国计算机传奇人物杰拉尔德.温伯格和唐纳德.高斯所著,我在网上买到的2003年版的本书,发现本书用20则幽默的现代寓言故事,60幅精美插图,以及一系列的适当提问和建议,让我们的思考方式慢慢得以扩 ...

  3. sp_configure错误：不支持对系统目录进行即席更新。

    今天在一台数据库服务器上(Microsoft SQL Server 2008 R2 (SP2) - 10.50.4000.0 (X64)     Standard Edition (64-bit))使 ...

  4. MySQL 更新语句技巧

    一. 多表更新 1. 数据准备 mysql> mysql> select goods_id, goods_name,goods_cate from tdb_goods; +-------- ...

  5. 打开Application Data

    1.建后缀名为reg的新文件,复制以下代码后点击运行. Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\*\shell\runas]@=& ...

  6. C++ - 静态成员函数

    c++中静态成员函数属于整个类, 而不是某个对象,因此不需要创建对象就可以访问 1.出现在类体外的函数定义不能指定关键字static:2.静态成员之间可以相互访问,包括静态成员函数访问静态数据成员和访 ...

  7. 【转】iframe和父页，window.open打开页面之间的引用

    [转]iframe和父页,window.open打开页面之间的引用 iframe和父页,window.open打开页面和被打开页面之间的关系可以通过下面的对象获取到 1)通过iframe加载的,在if ...

  8. poj1006 / hdu1370 Biorhythms (中国剩余定理)

    Biorhythms 题意:读入p,e,i,d 4个整数,已知(n+d)%23=p;   (n+d)%28=e;   (n+d)%33=i ,求n .        (题在文末) 知识点:中国剩余定理 ...

  9. 【转】40个良好用户界面Tips

    一个良好的用户界面应具有高转换率,并且易于使用.但要用户体验良好并不容易做到,下面我们整理了40个良好用户界面Tips,希望能对你有帮助! 1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的 ...

  10. POJ1275 Cashier Employment[差分约束系统 || 单纯形法]

    Cashier Employment Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7997   Accepted: 305 ...