使用目的：为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,我们使用rem的像素单位。

方法一：

1、在页面引入js，获取屏幕大小，更新rem基准。

  (function () {

      var currentWidth = document.documentElement.clientWidth || document.body.clientWidth

      nFont = currentWidth * 50 / 375;

      if (nFont > 50) {

        nFont = 50

      }

      getHtml = document.getElementsByTagName('html')[0]

      getHtml.style.fontSize = nFont + 'px';

    })();

2、设计稿除以100，得到实际尺寸。如（1920px  -> 192rem）

方法二：

原理：rem是相对于根元素<html>，这就意味着，我们只需要在根元素确定一个px字号（一般是UI设计师提供--设计稿寄出宽度一般为750px或640px,基础字体一般为75px或75px），则使用在线rem转换网站，就可以将px转rem。

使用方法：（以设计稿为750px,基础字体为75px为例）

1、首先引入app.js

(function(win) {

        var docEl = win.document.documentElement;

        var time;

        function refreshRem() {

                var width = docEl.getBoundingClientRect().width;

                if (width > 540) { // 最大宽度

                        width = 540;

                }

                var rem = width / 5; // 将屏幕宽度分成10份， 1份为1rem

                docEl.style.fontSize = rem + 'px';

                ///rem用font-size:75px来进行换算

                // 40/75

                // 20/37.5

        }

        win.addEventListener('resize', function() {

                clearTimeout(time);

                time = setTimeout(refreshRem, 1);

        }, false);

        win.addEventListener('pageshow', function(e) {

                if (e.persisted) {

                        clearTimeout(time);

                        time = setTimeout(refreshRem, 1);

                }

        }, false);

        refreshRem();

})(window);

//getBoundingClientRect()；该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，他返回的是一个对象，即Object,有6个属性 top 、bottom、right、left、width和height

//以前getBoundingClientRect()是IE特有的，目前FF3+，opera9.5+，safari 4，都已经支持这个方法。

//onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。

//为了查看页面是直接从服务器上载入还是从缓存中读取，可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 true，否则返回 false

/**

 * Created by Administrator on 2017/6/16.

 */

2、先用px写，写完了就用在线工具，将px转成rem即可。

移动端“响应式布局”’--rem的更多相关文章

  1. 移动端响应式布局+rem+calc()

    1.媒体查询:@media only screen and (max-width: ) {},在最初做pc端时,使用各种媒体查询,因为pc的屏幕分辨率总共就几种,不嫌麻烦的重复使用类名.有很大的缺陷就 ...

  2. 移动端响应式布局--你不知道的CSS3.0媒体查询，解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  3. 【CSS-移动端响应式布局详解】

    背景 移动端响应式布局开发主要方案有: 基于rem开发 基于媒体查询 基于弹性盒 基础概念 在讨论响应式布局知识前,先了解下移动端常用基础概念. 逻辑像素(CSS pixels) 浏览器使用的抽象单位 ...

  4. 响应式布局rem的使用

    在如今移动端,响应式布局的时代,用rem作为单位已经是非常普及的一门小技巧了..rem的单位根据html的font-size来进行换算! 1.rem的兼容性: 如下图所示IE9以上就支持了rem这个属 ...

  5. 响应式布局rem、rem方法封装、移动端响应式布局

    相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...

  6. PC 端响应式布局

    前言:PC端 电脑显示器的尺寸种类还是很多的,台式电脑和笔记本电脑尺寸相差就更明显,所以响应式布局还是很重要的,甚至是必须要考虑的. 响应式的页面好不好,在后管平台上很明显.因为后管平台,一般是全屏显 ...

  7. 探讨兼容IE低版本的PC端响应式布局

    http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了, ...

  8. 响应式布局-Rem的用法

    前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动.   先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...

  9. 移动端响应式布局，rem动态更新

    (function(){ var fontSizeMatchDeviceWidth = function(){ var deviceWidth = document.documentElement.c ...

随机推荐

  1. LoadRunner内部结构（2）

    LoadRunner内部结构(2) 接着(1)的内容: 17.默认的LRReport文件夹创建在本地分析机器的My Documents文件夹下来存储分析会话文件. 18.可以使用HTML格式 19.格 ...

  2. mysql权限操作

    1.mysql权限操作 grant select,insert on test1.tb1 to ltx2@127.0.0.1 默认权限:什么都没有 2.用户管理特殊命令: 创建用户:create us ...

  3. Python-函数基础(2)

    目录 可变长参数 形参 实参 函数对象 函数嵌套 名称空间与作用域 名称空间 内置名称空间 局部名称空间 全局名称空间 执行顺序 搜索顺序 作用域 全局作用域 局部作用域 global nonloca ...

  4. C++ 连接上期所CTP交易行情接口

    CTP相关接口和文档下载: http://www.simnow.com.cn/static/softwareDownload.action 相关库文件以及头文件如下: 遇到的问题: 1.运行直接退出了 ...

  5. 微信支付URL编解码小方法

    --> 打开chrome --> F12或Fn+F12打开控制台 --> encodeURIComponent("url") --> 回车

  6. Luogu P2272 [ZJOI2007]最大半连通子图(Tarjan+dp)

    P2272 [ZJOI2007]最大半连通子图 题意 题目描述 一个有向图\(G=(V,E)\)称为半连通的\((Semi-Connected)\),如果满足:\(\forall u,v\in V\) ...

  7. Property 'validate' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property 'valid...

    使用vue-cli 3.0+Element-ui时候,调用form表单校验时候出现的问题是: Property 'validate' does not exist on type 'Element | ...

  8. uni-app中不使用scroll-view组件,监听页面滑直底部事件

    最终达到的目标效果 将要用到 监听页面滚动事件:onPageScroll 获取节点信息uni.createSelectorQuery() 标签布局 <template> <view ...

  9. c语言学习笔记 关于double

    今天做了个简单的例子,由于没有使用正确的数据类型导致出错,下面是记录 #include <stdio.h> int main(void){ int i; double sum; doubl ...

  10. 88 Lowest Common Ancestor of a Binary Tree

    原题网址:https://www.lintcode.com/problem/lowest-common-ancestor-of-a-binary-tree/description 描述 给定一棵二叉树 ...