移动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属性.设计稿尺寸.前端与设计之间协作 ...
随机推荐
- BCB:UTF8Encode、AnsiToUtf8
UTF8Encode: Call Utf8Encode to convert a Unicode string to UTF-8. WS is the Unicode string to conver ...
- python之golbal/nonlocal
一.关键字 golbal nonlocal 在局部修改全局的变量为什么会报错 count = 0 def func(): count += 1 func() # UnboundLocalError: ...
- springmvc的第一个程序
文中用的框架版本:spring 3,hibernate 3,没有的,自己上网下. web.xml配置: <?xml version="1.0" encoding=" ...
- MVCPager学习小记
1.PageIndexParameterName怎么关联? 答:其实就是Action里面的pageindex参数 例子: @Html.Pager(Model, new PagerOptions { P ...
- Spring学习笔记之Spring概述
概述 Spring是一个java应用最广的开源框架,它是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Deve ...
- JVM内存模型与GC算法(简介)
JVM内存模型如上图,需要声明一点,这是<Java虚拟机规范(Java SE 7版)>规定的内容,实际区域由各JVM自己实现,所以可能略有不同.以下对各区域进行简短说明. 1.1程序计数器 ...
- cocos2dx lua 热更新方案的实现
(Upgrade.h) #include <stdio.h> #include "cocos2d.h" #include "framework/utils/U ...
- 二分查找、upper_bound、lower_bound
整理及总结二分查找的判断和边界细节 修改版 package com.leej.binarysearch; import java.util.Arrays; /** * @author jerry * ...
- 局域网映射到公网-natapp实现
在开发时可能会有这样的需求: 需要将自己开发的机器上的应用提供到公网上进行访问,但是并不想通过注册域名.搭建服务器等等一系列繁琐的操作来实现. 例如:微信公众号的开发调试就需要用到域名访问本机项目. ...
- JS处理数据四舍五入,tofixed与round的区别
此区别是在做微信端有关绑定设备数据曲线平滑处理的过程中,进行验证时候无意发现. 1 .tofixed方法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.例如将数据Num保留 ...