JS rem 设置
(function () {
var docEl = document.documentElement;
var resize = 'orientationchange' in window ? 'orientationchange' : 'resize';
var setRem = function () {
var screenWidth = docEl.clientWidth || window.screen.width || 360;
// 1080 PSD宽度(可变的)
docEl.style.fontSize = (100 * screenWidth / 1080) + 'px';
};
window.addEventListener('resize', setRem, false);
setRem();
})();
// 用法
psd量出来的像素距离 除以100 比如psd: 100px 转换后 1rem;
JS rem 设置的更多相关文章
- 遇到问题-----JS中设置window.location.href跳转无效(在a标签里或这form表单里)
问题情况 JS中设置window.location.href跳转无效 代码如下: ? 1 2 3 4 5 6 7 8 <script type="text/javascript&quo ...
- 如何HTML标签和JS中设置CSS3 var变量
一.HTML标签中设置CSS变量 如下: <div style="--color: #cd0000;"> <img src="mm.jpg" ...
- .NET前后台-JS获取/设置iframe内对象元素并进行数据处理
转载请注明出处:果冻栋吖 这个主要是修改H3BPM一个批量审批的功能时候做的.先看下图: H3自带了批量审批的功能,也就是按钮1,有审批意见3,但是如果3里边不填写内容点击1之后,效果就是表单里边没有 ...
- js ajax设置和获取自定义header信息的方法总结
目录 1.js ajax 设置自定义header 1.1 方法一: 1.2 方法二: 2.js ajax 获取请求返回的response的header信息 3.js ajax 跨域请求的情况下获取自定 ...
- js动态设置padding-top遇到的坑
我想通过js动态设置元素padding-top的百分比值:以下几种都是无法设置成功的: // setAttribute设置padding-top并且转换为百分比 imageBox.setAttribu ...
- js动态设置根元素的rem方案
方案需求: rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的根节点添加font-size 值. 使用mediaquery 可以解决这个问题,但是每一 ...
- 响应式布局(rem布局),使用JS动态设置fontsize
var cw = document.documentElement.clientWidth; if (cw > 1920) { cw = 1920; } document.getElements ...
- Js动态设置rem来实现移动端字体的自适应
//设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width( ...
- 第148天:js+rem动态计算font-size的大小,适配各种手机设备
需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方 ...
随机推荐
- 34、JS/AJAX
1)回顾JS中核心内容 2)了解WEB1.0和WEB2.0时代的技术与特点 3)理解AJAX的产生背景.工作原理与特点 4)掌握AJAX常用API及应用 声明:服务端使用Servlet技术 一 ...
- linux上使用amoeba实现MySql集群,以及读写分离,主从复制
一.由于是MySql集群,所以就不可能只有一个MySql,需要多个MySql,具体安装步骤,可以参考http://www.cnblogs.com/ywzq/p/4882140.html这个地址进行安装 ...
- 1350. Primary Arithmetic
Children are taught to add multi-digit numbers from right-to-left one digit at a time. Many find th ...
- zigbee学习之路(四):按键控制(中断方式)
一.前言 通过上次的学习,我们学习了如何用按键控制led,但是在实际应用中,这种查询方式占用了cpu的时间,如果通过中断控制就可以解决这个问题,我们今天就来学习按键控制的中断方式. 二.原理分析 传统 ...
- WEB前端的原理及组成
1:认识WEB前端的组成部分和相关专业术语!具体的总结如下:
- Unity-The Courtyard demo学习
1.编辑器相机同步 The Courtyard的demo中,会发现Scene视图和Game视图是编辑器下同步的,它通过一个CopySceneView.cs脚本实现 Scene视图和Game视图的显示效 ...
- python(六)内置函数
一.函数知识补充 函数不设置值,默认返回None:函数中参数都是按引用传递,函数里修改了参数,原始参数也会修改. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1 ...
- sql server数据库语句
-- 3-5 创建表Studnetcreate table Student(Sno char(9) primary key,Sname char(20) UNIQUE,Ssex CHAR(2),Sa ...
- R----ggplot2包介绍学习
分析数据要做的第一件事情,就是观察它.对于每个变量,哪些值是最常见的?值域是大是小?是否有异常观测? ggplot2图形之基本语法: ggplot2的核心理念是将绘图与数据分离,数据相关的绘图与数据无 ...
- Nordic Semiconductor nRF52832 蓝牙智能多协议单芯片解决方案荣获《中国电子商情》编辑选择奖
挪威奥斯陆 – 2016年4月11日 – Nordic Semiconductor ASA (OSE: NOD) 赢得<中国电子商情>颁发的"2015年编辑选择奖",其 ...