移动web端使用rem实现自适应原理
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实现自适应原理的更多相关文章
- Web端服务器推送技术原理分析及dwr框架简单的使用
1 背景 “服务器推送技术”(ServerPushing)是最近Web技术中最热门的一个流行术语.它是继“Ajax”之后又一个倍受追捧的Web技术.“服务器推送技术”最近的流行跟“Ajax ”有着密切 ...
- Web端server推送技术原理分析及dwr框架简单的使用
1 背景 "server推送技术"(ServerPushing)是近期Web技术中最热门的一个流行术语.它是继"Ajax"之后又一个倍受追捧的Web技术.&qu ...
- 移动端利用rem实现自适应布局
好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...
- 前端移动端的rem适配计算原理
rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font si ...
- Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE
1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...
- Comet技术详解:基于HTTP长连接的Web端实时通信技术
前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...
- web 端即时通讯
1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...
- Web端即时通讯基础知识补课:一文搞懂跨域的所有问题!
本文原作者: Wizey,作者博客:http://wenshixin.gitee.io,即时通讯网收录时有改动,感谢原作者的无私分享. 1.引言 典型的Web端即时通讯技术应用场景,主要有以下两种形式 ...
- 移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
随机推荐
- python_95_类变量的作用及析构函数
参考:http://www.cnblogs.com/alex3714/articles/5188179.html #类变量的用途:大家共有的属性,节省内存 class Person(): cn='Ch ...
- matplotlib subplot 子图
总括 MATLAB和pyplot有当前的图形(figure)和当前的轴(axes)的概念,所有的作图命令都是对当前的对象作用.可以通过gca()获得当前的axes(轴),通过gcf()获得当前的图形( ...
- CPL学习笔记(一)
整型 计算机的内存的基本单位是位(bit),可以将其看作电子开关,可以开,表示1:也可以关表示0. 字节(byte)通常指八位的内存单元. 8bit=1byte=1B; 1KB=1024B; 1M=1 ...
- 201621123080 《Java程序设计》第2周学习总结
Week02-Java基本语法与类库 1. 本周学习总结 本周主要学习了java的数据类型.运算符,String类,java的简单输入输出与流程控制. 在做题上对String和数组的理解与区分仍不够深 ...
- MySQL中CONCAT()的用法
MySQL中CONCAT()的用法 在日常开发过程中,特别是在书写接口的时候,经常会遇到字符串拼接的情况,比如在返回图片数据时,数据库里往往存储的是相对路径,而接口里一般是存放绝对地址,这就需要字符串 ...
- pandas处理较大数据量级的方法 - chunk,hdf,pkl
前情提要: 工作原因需要处理一批约30G左右的CSV数据,数据量级不需要hadoop的使用,同时由于办公的本本内存较低的缘故,需要解读取数据时内存不足的原因. 操作流程: 方法与方式:首先是读取数据, ...
- 【Hadoop/Hive/mapreduce】系列之使用union all 命令之后如何对hive表格使用python进行去重
业务场景大概是这样的,这里由两个hive表格,tableA 和 tableB, 格式内容都是这样的: uid cate1 cate2 在hive QL中,我们知道union有着自动去重的功能,但是那是 ...
- pandas-Notes1
#coding = utf-8 import pandas as pd import numpy as np import matplotlib as plt # series, like vecto ...
- AreYouBusy HDU - 3535 (dp)
AreYouBusy Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- k短路模板
https://acm.taifua.com/archives/jsk31445.html 链接: https://nanti.jisuanke.com/t/31445 #include <io ...