对于现在不同尺寸的移动端屏幕，如果设置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（十）

    1.定制Comment列表 新增加Comment list页面,执行命令行 > play crud:ov --template Comments/list 会生成/app/views/Comme ...

  2. C#中Split用法

    1.用字符串分隔:  using System.Text.RegularExpressions; string str="aaajsbbbjsccc"; string[] sArr ...

  3. 从零自学Hadoop(16)：Hive数据导入导出，集群数据迁移上

    阅读目录 序 导入文件到Hive 将其他表的查询结果导入表 动态分区插入 将SQL语句的值插入到表中 模拟数据文件下载 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并 ...

  4. 解决: DeprecationWarning: Passing 1d arrays as data is deprecated in 0.17 and will raise ValueError in 0.19

    错误信息:C:\Python27\lib\site-packages\sklearn\utils\validation.py:395: DeprecationWarning: Passing 1d a ...

  5. 迅为最新推出iTOP-6818开发平台无缝支持4418开发板

    iTOP-6818开发板是一款四核ARM 八核开发板与iTOP-4418开发板完全兼容,CPU主频1.4GHz,内存1GB DDR3(2GB可选),存储16GB EMMC,板载千兆以太网,GPS,WI ...

  6. spring3.0+mybatis+spring快速入门

    一.首先奉上项目目录结构: 说明: dao,mapping,model包下的所有内容可以使用Generator工具自助生成. 具体用法,可以网上学习一下,比较简单,主要做以下工作: 1.提供相关的数据 ...

  7. 使用maven将代码到私服

    在上一节中,我们讲述了maven私服搭建 ,那么本章,我们讲述如何使用maven将代码打包并上传到maven私服上. 一.maven pom.xml关键配置信息. <distributionMa ...

  8. 树莓派搭建ActiveMQ

    树莓派上安装ActiveMQ和在其它Linux发行版基本相同,只是在开防火墙端口时有区别.   硬件信息: 树莓派3B型,Raspbian系统   安装 //下载ActiveMQ安装包 http:// ...

  9. python 聊天室

    server端程序 # -*- coding: utf-8 -*- #!/usr/bin/python """ """ import soc ...

  10. BestCoder Round #89 Fxx and string

    问题描述 青年理论计算机科学家Fxx得到了一个只包含小写字母的字符串. 字符串的长度为\:nn,下标从1开始,第\:i\:i位的字母为\:s_is​i​​,现在Fxx想知道有多少三元组\:(i,j,k ...