移动端响应式rem
(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 / 375) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
//使用方法
//根据需要修改 docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
//100 为fontsize 所需要的值 375 是以iPhone6为基准 具体视情况自己设置
//在页面中根据设计图的宽高除100 即是rem值
移动端响应式rem的更多相关文章
- 移动端使用rem同时适应安卓ios手机原理解析,移动端响应式开发
rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 ...
- 基于REM的移动端响应式适配方案
视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...
- 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景
媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...
- 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范
基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...
- 【CSS-移动端响应式布局详解】
背景 移动端响应式布局开发主要方案有: 基于rem开发 基于媒体查询 基于弹性盒 基础概念 在讨论响应式布局知识前,先了解下移动端常用基础概念. 逻辑像素(CSS pixels) 浏览器使用的抽象单位 ...
- 探讨兼容IE低版本的PC端响应式布局
http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了, ...
- 前端笔记之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- 响应式布局rem、rem方法封装、移动端响应式布局
相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...
- 流式布局&固定宽度&响应式&rem
我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法. 1.流式布局: ...
随机推荐
- 使用MyBatis Generator自动生成MyBatis的代码
这两天需要用到MyBatis的代码自动生成的功能,由于MyBatis属于一种半自动的ORM框架,所以主要的工作就是配置Mapping映射文件,但是由于手写映射文件很容易出错,所以可利用MyBatis生 ...
- spark groupByKey().mapValues
>>> rdd = sc.parallelize([("bone", 231), ("bone", 21213), ("jack&q ...
- python 代码混淆工具汇总
pyminifier Pyminifier is a Python code minifier, obfuscator, and compressor. Note For the latest, co ...
- [翻译]NUnit---Action Attributes(八)
Attributes NUnit 1.0使用传统的基于继承和命名约定来识别测试.从2.0开始NUnit使用自定义特性来实现. 因为NUnit的test fixtures不是从框架类库继承,所以开发人员 ...
- 推理集 —— death
事故: 自杀: 他杀: 1. 跳楼 头向下死得比较快,没那么痛苦. 脚向下,不会立刻死亡,痛苦至极.死亡原因可能不是跳楼,而是失血过多而死 扑下去, 同头向下. 仰着跌下去,同头向下.. 跳楼最好头先 ...
- SYSUCPC2017 DAG最多能添加多少边?
校赛的一道题目 难度不大 不过还是挺有趣的 题意:给定一个有向图,问此图是不是一个DAG且不包含重边 如果是的话 回答最多可以添加多少条边且图仍然是个DAG 考虑对于任意一个点u 添加一条边(u,v) ...
- bzoj4870
http://www.lydsy.com/JudgeOnline/problem.php?id=4870 矩阵快速幂... 人话题意:从nk个物品里选模k余r个物品,问方案数模P 那么我们有方程 f[ ...
- P2597 [ZJOI2012]灾难(倍增LCA+拓扑排序)
传送门 据大佬说这玩意儿好像叫灾难树还是灭绝树? 我们先按建图,设点$u$的食物有$x[1]...x[k]$,即在图中这些点都有一条指向它的边 以样例来说,对于人,羊和牛都有一条指向它的边,然而不管是 ...
- Java中的抽象类详解,它存在的意义在哪里?
学习抽象类前先理解下面这段话: 问你个问题,你知道什么是"东西"吗?什么是"物体"吗? "麻烦你,小王.帮我把那个东西拿过来好吗" 在生活中 ...
- javascript实现继承的4种方法,以及它们的优缺点
1. 原型链继承(有缺陷): 缺陷1:切断了Zi.prototype.constructor与Zi的关系 缺陷2:原型链上的引用类型的数据会被所有实例共享 2. 构造函数继承(有缺陷): 缺陷1:Fu ...