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

rem是相对于根元素<html>

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

  1. <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.

  1.  (function (doc, win) {
  2.      var docEl = doc.documentElement,
  3.          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  4.          recalc = function () {
  5.              var clientWidth = docEl.clientWidth;
  6.              if (!clientWidth) return;
  7.              docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
  8.          };
  9.  
  10.      // Abort if browser does not support addEventListener
  11.      if (!doc.addEventListener) return;
  12.      win.addEventListener(resizeEvt, recalc, false);
  13.      doc.addEventListener('DOMContentLoaded', recalc, false);
  14.  })(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. C语言递归，非递归实现翻转链表

    翻转链表作为,链表的常用操作,也是面试常遇到的. 分析非递归分析: 非递归用的小技巧比较多,很容易出错. 递归分析比较简单,在代码里面 代码: #include<stdio.h> #inc ...

  2. SQL SERVER 2000 迁移后SQL SERVER代理服务启动错误分析

    公司有一个老系统,这个系统所用的数据库是SQL SERVER 2000,它所在的Dell服务器已经运行超过10年了,早已经过了保修服务期,最近几乎每周会出现一次故障,加之5月份另外一台服务器坏了两个硬 ...

  3. MySQL 插入数据时，中文乱码问题的解决（转）

    当向 MySQL 数据库插入一条带有中文的数据形如 insert into employee values(null,'张三','female','1995-10-08','2015-11-12',' ...

  4. 监控mysql各种选项

    安装mysql之后,需要对mysql服务进行监控.   nagios开源自带的check_mysql 对 mysql 的slave 机监控倒是不错.但是对数据库主机监控就略显不足了.   使用一个监控 ...

  5. Mongodb基本数据类型、常用命令之增加、更新、删除

    1.null---表示空值或者该字段不存在,如{"name":null} 2.布尔 --- 和java中的布尔一样,有两种:true,false,如{"sex" ...

  6. 【转载】Markdown使用笔记

    献给写作者的 Markdown 新手指南 http://www.jianshu.com/p/q81RER 「简书」作为一款「写作软件」在诞生之初就支持了 Markdown,Markdown 是一种「电 ...

  7. Android的NDK技术

    Android的NDK技术

  8. python数据库操作对主机批量管理

    import paramiko import MySQLdb conn = MySQLdb.connect(host=',db='host') cur = conn.cursor(cursorclas ...

  9. strstr 函数的实现

    strstr函数:返回主串中子字符串的位置后的所有字符. #include <stdio.h> const char *my_strstr(const char *str, const c ...

  10. SVN 提交失败： permission denied - txn-current-lock

    执行以下命令即可 sudo chown -R www-data:subversion myproject sudo chmod -R g+rws myproject