1.先获取到物理像素和实际像素的像素比

var pixclPatio = 1 / window.devicePixelRatio;

2.viewport视口设置为像素比大小

document.write('<meta name="viewport" content="width=device-width,initial-scale=' + pixclPatio + ',minimum-scale=' + pixclPatio + ',maximum-scale=' + pixclPatio + ',user-scalable=no" />');

3.根据屏幕宽度动态设置html的字体大小

var html = document.getElementsByTagName('html')[0];
var pageWidth = html.getBoundingClientRect().width;
html.style.fontSize = pageWidth / 50 + 'px';

4.在less或者sass中设置变量$rem或者@rem,然后将单位换成/@rem或/$rem就可以了。

@r: 15rem;

5.@rem: 15rem 的大小是根据设计图来决定的。这里我使用的是750的iphone6s的设计图,

因为html.style.fontSize = pageWidth / 50 + 'px';设置了在750的手机下面html的font-size:15px;所以想要让rem表示为一个像素。@rem需要设置为15rem

移动web端使用rem实现自适应原理的更多相关文章

  1. Web端服务器推送技术原理分析及dwr框架简单的使用

    1 背景 “服务器推送技术”(ServerPushing)是最近Web技术中最热门的一个流行术语.它是继“Ajax”之后又一个倍受追捧的Web技术.“服务器推送技术”最近的流行跟“Ajax ”有着密切 ...

  2. Web端server推送技术原理分析及dwr框架简单的使用

    1 背景 "server推送技术"(ServerPushing)是近期Web技术中最热门的一个流行术语.它是继"Ajax"之后又一个倍受追捧的Web技术.&qu ...

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

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

  4. 前端移动端的rem适配计算原理

    rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font si ...

  5. Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE

    1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...

  6. Comet技术详解:基于HTTP长连接的Web端实时通信技术

    前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...

  7. web 端即时通讯

    1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...

  8. Web端即时通讯基础知识补课:一文搞懂跨域的所有问题!

    本文原作者: Wizey,作者博客:http://wenshixin.gitee.io,即时通讯网收录时有改动,感谢原作者的无私分享. 1.引言 典型的Web端即时通讯技术应用场景,主要有以下两种形式 ...

  9. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

随机推荐

  1. python_95_类变量的作用及析构函数

    参考:http://www.cnblogs.com/alex3714/articles/5188179.html #类变量的用途:大家共有的属性,节省内存 class Person(): cn='Ch ...

  2. matplotlib subplot 子图

    总括 MATLAB和pyplot有当前的图形(figure)和当前的轴(axes)的概念,所有的作图命令都是对当前的对象作用.可以通过gca()获得当前的axes(轴),通过gcf()获得当前的图形( ...

  3. CPL学习笔记(一)

    整型 计算机的内存的基本单位是位(bit),可以将其看作电子开关,可以开,表示1:也可以关表示0. 字节(byte)通常指八位的内存单元. 8bit=1byte=1B; 1KB=1024B; 1M=1 ...

  4. 201621123080 《Java程序设计》第2周学习总结

    Week02-Java基本语法与类库 1. 本周学习总结 本周主要学习了java的数据类型.运算符,String类,java的简单输入输出与流程控制. 在做题上对String和数组的理解与区分仍不够深 ...

  5. MySQL中CONCAT()的用法

    MySQL中CONCAT()的用法 在日常开发过程中,特别是在书写接口的时候,经常会遇到字符串拼接的情况,比如在返回图片数据时,数据库里往往存储的是相对路径,而接口里一般是存放绝对地址,这就需要字符串 ...

  6. pandas处理较大数据量级的方法 - chunk,hdf,pkl

    前情提要: 工作原因需要处理一批约30G左右的CSV数据,数据量级不需要hadoop的使用,同时由于办公的本本内存较低的缘故,需要解读取数据时内存不足的原因. 操作流程: 方法与方式:首先是读取数据, ...

  7. 【Hadoop/Hive/mapreduce】系列之使用union all 命令之后如何对hive表格使用python进行去重

    业务场景大概是这样的,这里由两个hive表格,tableA 和 tableB, 格式内容都是这样的: uid cate1 cate2 在hive QL中,我们知道union有着自动去重的功能,但是那是 ...

  8. pandas-Notes1

    #coding = utf-8 import pandas as pd import numpy as np import matplotlib as plt # series, like vecto ...

  9. AreYouBusy HDU - 3535 (dp)

    AreYouBusy Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  10. k短路模板

    https://acm.taifua.com/archives/jsk31445.html 链接: https://nanti.jisuanke.com/t/31445 #include <io ...