解决rem文字动态改变字体大小:

<script>

  console.log(window.devicePixelRatio);

  var iScale = 1;

  iScale = iScale/window.devicePixelRatio;

  document.write('<meta name="viewport" content="width=device-width,user-scable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '"/>');

  //console.log(document.documentElement.clientWidth);

  var iWidth = document.documentElement.clientWidth/16;

  document.getElementsByTagName('html')[0].style.fontSize = iWidth + 'px';

</script>

rem布局:

var fun = function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth; 
            if (!clientWidth) return;
            //这里是假设在750px宽度设计稿的情况下,1rem = 100px;
            //可以根据实际需要修改
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window)

rem布局和使用js rem动态改变字体大小,自适应的更多相关文章

  1. 使用js rem动态改变字体大小,自适应

    <html> <head> <meta charset="utf-8"> <script> console.log(window.d ...

  2. 改变字体大小实现自适应之js方案A

    一.元素大小有两种写法 1.写结果:设计师给的移动端页面sketch设计稿一般是750px宽度,在sublime编辑器里,设置cssrem或rem-unit插件为56px的字体大小.做页面时,设计稿是 ...

  3. pycharm设置用滑轮改变字体大小

    在电脑第一次安装pycharm之后,发现每次调整代码界面的字体,总是需要到setting里面调整,这样非常不方便,特别是对于代码量很多的时候,我们有时候需要把目光聚焦到某一句代码,这个时候就需要放大, ...

  4. [转]响应式网页设计:rem、em设置网页字体大小自适应

    本文转自:http://www.cnblogs.com/aimyfly/archive/2013/07/19/3200742.html 「rem」是指根元素(root element,html)的字体 ...

  5. 响应式网页:用em,rem设置网页字体大小自适应

    「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...

  6. 响应式网页设计:rem、em设置网页字体大小自适应

    「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...

  7. uiwebview 加载html时字体变小 加载前或加载后改变字体大小

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #6122ae } p.p2 { margin: 0.0px 0. ...

  8. Eclipse 改变字体大小,设置背景色

    Eclipse背景颜色修改: 操作界面默认颜色为白色.对于我们长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以我经常会改变workspace的背景色,使眼睛舒服一些.设置方法如下: 1.打开win ...

  9. 响应式布局中为什么要使用em设置字体大小而不用px

    px像素(Pixel).相对长度单位.像素px是相对于不同设备显示器屏幕分辨率(pad/phone/pc)而言的.(引自CSS2.0手册) 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此 ...

随机推荐

  1. 看逐浪CMS技术小哥做SVG动画(附使用Bodymovin和Lottie将Adobe After Effects(AE)程式转为 HTML5/Android/iOS原生的动画全过程-即AE转svg\canvas\html5动画)

      名词解解释 adobe After Effects AE:adobe After Effects,adobe公司的专业视频制作软件. Bodymovin插件预览 Bodymovin:是一个AE的插 ...

  2. 内存管理 malloc free 的实现

    libc 中提供非常好用的  malloc free 功能,如果自己实现一个,应该怎么做. 要实现 malloc free 需要有 可以分配内存使用的堆,和记录内存使用情况的链表. 如下图所示,堆从高 ...

  3. JVM笔记-运行时内存区域划分

    1. 概述 Java 虚拟机在执行 Java 程序的过程中会把它管理的内存划分为若干个不同的数据区域.它们各有用途,有些随着虚拟机进程的启动一直存在(堆.方法区),有些则随着用户线程的启动和结束而建立 ...

  4. C#如何实现大小写转换

    2020-03-16  每日一例第8天 1.新建窗体应用程序,拖入label/textbox/radiobutton控件,并改text值:  2.button控件输入代码: if (radioButt ...

  5. Docker极简部署Kafka+Zookeeper+ElasticStack

    之前写ELK部分时有朋友问有没有能一键部署的Kafka+ELK,写本文主要是填这个坑,基本上配置已经集中在一两个文件中了,理论上此配置支持ElasticStack 7.x所有版本 本文所有配置与代码均 ...

  6. Effective Go笔记

    一 格式化 使用gofmt程序对go源码进行格式化,以便统一编码风格,可直接在GoLand进行配置[1].Go源码格式使用tab作为缩进,且很少使用括号. 二 注释 Go支持块注释/**/和行注释// ...

  7. ES6—get 与 set

    在类里面可以去定义一些getter和setter,getter可以得到一些东西的方法,setter可以设置东西 class Chef{ constructor(food){ this.food = f ...

  8. 【TIJ4】第五章全部习题

    第五章习题 5.1 package ex0501; //[5.1]创建一个类,它包含一个未初始化的String引用.验证该引用被Java初始化成null class TestDefaultNull { ...

  9. kerberos系列之hdfs&yarn认证配置

    一.安装hadoop 1.解压安装包重命名安装目录 [root@cluster2_host1 data]# tar -zxvf hadoop-2.7.1.tar.gz -C /usr/local/ [ ...

  10. Natas23 Writeup(php弱类型)

    Natas23: 一个登录页面,查看源码,发现关键代码: if(array_key_exists("passwd",$_REQUEST)){ if(strstr($_REQUEST ...