rem js 自适应布局
(function(doc, win) {
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//orientationchange屏幕是否旋转
recalc = function() {
var whdef = 120 / 1920; // 表示1920的设计图,使用100PX的默认值
var wH = window.innerHeight; // 当前窗口的高度
var wW = window.innerWidth; // 当前窗口的宽度
var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
$('html').css('font-size', rem + "px");
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false); //监听事件窗口变化的事件
doc.addEventListener('DOMContentLoaded', recalc, false); //初始化完成
})(document, window)
rem js 自适应布局的更多相关文章
- 移动端利用rem实现自适应布局
好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...
- 移动端web app要使用rem实现自适应布局:font-size的响应式
关于webAPP的开发最主要解决的就是“自适应自适应布局”.常规的适配有很多做法,例如:流式布局.限死宽度等,但是这些方案都不是最佳的解决方法,而最满足设计需要的是: 元素可以根据屏幕大小而等比列变 ...
- Rem实现自适应布局
rem布局的目的是为了让我们可以用同一份代码,适应不同的移动终端(rem:就是css单位) 1.项目入口html文件<meta name="viewport" content ...
- rem.js移动布局实例教程
最近想买需要开发微站,微信公众号内嵌入的移动web,总结方法可以使用css3直接使用百分比布局,也可以使用bootstrap做响应式布局等多种方法,个人感觉看项目需要,笔者使用rem.js进行移动前端 ...
- flexible.js + makegrid.js 自适应布局
一,flexible.js 的使用方式: (一),引用方式 1,引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3. ...
- 针对老式浏览器(主要是IE6、7、8)的css3-mediaqueries.js自适应布局
<meta name="viewport" content="width=device-width, initial-scale=1" /> vie ...
- rem自适应布局的回顾总结
使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...
- 关于使用rem单位,calc()进行自适应布局
关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...
- 关于使用rem单位、css函数calc()进行自适应布局
一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...
随机推荐
- Chrome查看JavaScript函数
在页面上右键view page source(Ctrl+U),然后在弹出来的界面可以查找JavaScript函数 注意:这个只能看到内嵌在网页上的JavaScript函数 一般来讲,JavaScrip ...
- CPU开销sql server 性能调优
sql server 性能调优 CPU开销分析 一. 概述 上次在介绍性能调优中讲到了I/O的开销查看及维护,这次介绍CPU的开销及维护, 在调优方面是可以从多个维度去发现问题如I/O,CPU, 内存 ...
- 洛谷 P2822 [ NOIP 2017 ] 组合数问题 —— 数学
题目:https://www.luogu.org/problemnew/show/P2822 阶乘太大,算不了: 但 k 只有 8 个质因子嘛,暴力60分: #include<iostream& ...
- gitlab smtp设置
QQ exmail gitlab_rails['smtp_enable'] = true gitlab_rails['smtp_address'] = "smtp.exmail.qq.com ...
- Avito Code Challenge 2018 A~E
A. Antipalindrome 还以为是什么神dp结果就是分情况讨论啊 原串是一串一样的字符的话输出0,是回文串的话输出n-1,否则直接输出原串长度 #include<iostream> ...
- P2700逐个击破(并查集/树形dp)
P2700 逐个击破 题目背景 三大战役的平津战场上,傅作义集团在以北平.天津为中心,东起唐山西至张家口的铁路线上摆起子一字长蛇阵,并企图在溃败时从海上南逃或向西逃窜.为了就地歼敌不让其逃走,老毛同志 ...
- [Swift]经典解题思路:联合查找Union Find
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- N - Binomial Showdown (组合数学)
Description In how many ways can you choose k elements out of n elements, not taking order into acco ...
- 239 Sliding Window Maximum 滑动窗口最大值
给定一个数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧.你只可以看到在滑动窗口 k 内的数字.滑动窗口每次只向右移动一位.例如,给定 nums = [1,3,-1,-3, ...
- cocos creator 场景如何透明,多个canvas层级显示
转载地址:https://forum.cocos.com/t/creator-canvas/55373/14 Creator 版本:1.7 目标平台:WEB MOBILE 项目需要,页面做了多个Can ...