Rem实现自适应布局
rem布局的目的是为了让我们可以用同一份代码,适应不同的移动终端(rem:就是css单位)
1、项目入口html文件<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
2、在项目util文件夹下创建rem.js文件
3、再在main.js 文件import './utils/rem'
rem.js代码如下://以iPhone6尺寸为基准
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 375) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
}
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
Rem实现自适应布局的更多相关文章
- 移动端利用rem实现自适应布局
好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...
- 移动端web app要使用rem实现自适应布局:font-size的响应式
关于webAPP的开发最主要解决的就是“自适应自适应布局”.常规的适配有很多做法,例如:流式布局.限死宽度等,但是这些方案都不是最佳的解决方法,而最满足设计需要的是: 元素可以根据屏幕大小而等比列变 ...
- rem js 自适应布局
(function(doc, win) { resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//o ...
- 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单 ...
- 【转载】rem自适应布局-移动端自适应必备
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...
- 【转】rem自适应布局
rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...
- rem 是如何实现自适应布局的
摘要:rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.本文讲的是如何使用rem实现自适应.· rem这是个低调的css单位,近一 ...
随机推荐
- sql left join 字符串
select * FROM table1 as t1 right join (select '1,2,3,4,5' as t) as tt on t1.Id=tt.t select * FROM t ...
- Easyui datagrid加载数据时默认全选的问题
问题描述: 最近使用 Easyui datagrid 展示数据,之前一直使用很正常,今天出现了一个怪异问题 加载数据后,只要点击选中列 ck 的任意行或多行,再刷新时整个datagrid的所有数据都 ...
- lua中使用table实现类和继承
--因为只有当读写不存在的域时,才会触发__index和__newindex classA = {className = "classA",name="classAIns ...
- switch case 忘记 break
昨天纠结了很久的问题,一直找不到原因,早上发现是一个低级错误: private void selectButton(int id) { switch (id) { case 0: recommend_ ...
- ST Link 调试问题总结
用过ST Link调试工具的同事都应该知道,ST Link是一个很不错的调试工具,它具有小并且功能齐全,价格便宜等特点,现在市场上普遍是下面这两种ST Link, 但如果用的比较多,会发现有时候会存在 ...
- BEM,SASS,LESS,bootstrap:如何有效地将这些方法,工具和框架聪明地整合?
https://medium.com/@andersonorui_/bem-sass-and-bootstrap-9f89dc07d20f Bootstrap是一个“HTML,CSS和Javascri ...
- SQL Server ->> Natively Compiled Stored Procedures(本地编译存储过程)
Comming soon! 参考: Natively Compiled Stored Procedures
- 24点-code1
#include <iostream> #include <string> #include <cstdlib> #include <cmath> us ...
- POI读取xls和xlsx
import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import ...
- 【深入理解JAVA虚拟机】第三部分.虚拟机执行子系统.3.函数调用与执行
这章原名叫“虚拟机字节码执行引擎”,实际就是讲的函数如何调用和执行的. 1.概述 “虚拟机”是一个相对于“物理机”的概念,这两种机器都有代码执行能力, 其区别是物理机的执行引擎是直接建立在处理器. 硬 ...