以最小1024尺寸为例:

function rem() {
var htmlEle = document.documentElement;
var winWidth = htmlEle.clientWidth || document.body.clientWidth;
var width = winWidth <= 1024 ? 1024 : winWidth;
htmlEle.style.fontSize = Math.ceil(100 * (width / 1920)) + 'px';
htmlEle.style.height = htmlEle.clientHeight + 'px';
htmlEle.style.minWidth = 1024 + 'px';
};
rem();
window.onresize = function() {
rem();
}

动态计算rem的js代码的更多相关文章

  1. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  2. 根据iPhone6设计稿动态计算rem值

    rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的更节点添加font-size 值.使用mediaquery 可以解决这个问题,但是每一个文件都引用一 ...

  3. 依据iPhone6设计稿动态计算rem值

    rem 单位在做移动端的h5开发的时候是最常常使用的单位. 为解决自适应的问题.我们须要动态的给文档的更节点加入font-size 值.使用mediaquery 能够解决问题,可是每个文件都引用一大串 ...

  4. rem自适应js代码

    以后懒得写,直接复制了 var computedFz = (function(){ var designWidth = 375, rem2px = 100; function computedFz() ...

  5. 第148天:js+rem动态计算font-size的大小,适配各种手机设备

    需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方 ...

  6. 动态加载JS代码

    到处查资料研究js动态脚本的加载,找到以下7种方法,总有一种适合你! 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne ...

  7. 还能输入多少字?(JS动态计算)

    <div class="m-form ovh"> <div class="hd"> <span class="fr&qu ...

  8. JQuery - 动态添加Html后,如何使CSS生效,JS代码可用?

    今天在开发JQuery Mobile程序时候,需要从服务器取得数据,随后显示在页面上的Listview控件中,数据完整获取到了,也动态添加到Listview控件中,但是数据对应的CSS没有任何效果了, ...

  9. js 日期计算星座 根据生日的月份和日期,一行代码计算星座的js小函数(转)

    本博客根据 开源中国作者清风徐不来 的文章 根据生日的月份和日期,一行代码计算星座的js小函数(转) 原文出自CSDN 无心的专栏 的文章,知识产权归原文作者所有! 点击查看原文:js 日期计算星座

随机推荐

  1. bzoj 2337: [HNOI2011]XOR和路径

    Description Input Output Sample Input Sample Output HINT Source Day2 终于把这个史前遗留的坑给填了... 首先异或的话由位无关性,可 ...

  2. 编译TensorFlow源码

      编译TensorFlow源码 参考: https://www.tensorflow.org/install/install_sources https://github.com/tensorflo ...

  3. 冒烟测试与BVT测试

    冒烟测试,它和回归测试的性质一样--只是一个测试活动,并不是一个测试阶段.冒烟测试贯穿于测试的任何一个阶段,单元测试.集成测试.系统测试里都有冒烟测试. 冒烟测试和其他所有的测试活动的目的不一样,它不 ...

  4. 最近提交一个mysql5.7的bug,提醒自己以后注意写SQL要规范

    最近帮朋友提交一个mysql5.7的bug , oracle mysql 的大神还回复我 , 以后注意书写sql规范 , 潜台词是不是不要给他们增加工作量 https://bugs.mysql.com ...

  5. Ubuntu16.04下编译安装OpenCV3.4.0(C++ & python)

    Ubuntu16.04下编译安装OpenCV3.4.0(C++ & python) 前提是已经安装了python2,python3 1)安装各种依赖库 sudo apt-get update ...

  6. Xamarin.Android AlertDialog中的EditText打上去字为什么不显示?也没有光标闪烁

    AlertDialog.Builder builder = new AlertDialog.Builder(this);            builder.SetTitle("请您输入管 ...

  7. Ruby学习之深入类

    在讨论对象模型时,对类做了初步了解,关于类本身,还有许多知识需要学习. 类定义 Ruby中,可以用class关键字或者Class.new方法来定义一个类,在Ruby中,类定义的同时就是在运行代码,类和 ...

  8. [转]如何用adb控制MTKLogger

    [DESCRIPTION] 如何通过adb command去控制MTKLogger 开关,设定log路径等等. [KEYWORD] MTKLogger adb控制 路径 大小 [SOLUTION] 1 ...

  9. 【Dijkstra堆优化】洛谷P2243电路维修

    题目背景 Elf 是来自Gliese 星球的少女,由于偶然的原因漂流到了地球上.在她无依无靠的时候,善良的运输队员Mark 和James 收留了她.Elf 很感谢Mark和James,可是一直也没能给 ...

  10. CSS(三)背景 list-style display visibility opacity vertical cursor

    背景background 1.background-color:''   背景颜色 2.background-image:'' 背景图片 background-repeat:'' 背景图片是否平铺 取 ...