解决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. docker学习之路

    环境 : ubuntu 16.4 下载docker 首先使用命令行下载 docker wget -qO- https://get.docker.com/ | sh 启动 下载完成之后进行一个启动,但是 ...

  2. 关于SDL的一些坑:找不到WinMain,不显示控制台,添加链接库等

    目录: 用CMake构建SDL时报错 Gcc添加链接库 Gcc找不到入口(WinMain) 让SDL启动时不带控制台窗口 用CMake构建SDL时报错 root@ubuntu:~/SDL# cmake ...

  3. Robotutor Scratch3.0 在线编程平台上线!

    终于,Scratch3.0在线编程平台上线了,不容易阿! 欢迎试用 https://scratch.robotutor.cn 欢迎交流,WeChat ID: iamlinweidong

  4. Silence主题 美观清爽的cnblog第三方主题

    为什么推荐? 才开通cnblog,但苦于官方主题都不是很好看,翻找Github的时候发现了这个项目Silence 这是预览地址 官方展示图片 安装中的坑 不显示公共模块.博文目录.博文签名.博文赞赏. ...

  5. 机器学习 - LSTM应用之情感分析

    1. 概述 在情感分析的应用领域,例如判断某一句话是positive或者是negative的案例中,咱们可以通过传统的standard neuro network来作为解决方案,但是传统的神经网络在应 ...

  6. 建议11:增强数组排序的sort功能

    sort方法不仅按字母顺序进行排序,还可以根据其他顺序执行操作.这时就必须为方法提供一个比较函数的参数,该函数要比较两个值,然后返回一个用于说明这两个值得相对顺序的数字.比较函数应该具有两个参数a和b ...

  7. rimraf node_modules 突然不能用了 怀疑是yarn的问题,从环境变量将yarn删掉,能用了

    rimraf node_modules 突然不能用了 怀疑是yarn的问题,从环境变量将yarn删掉,能用了

  8. 【简说Python WEB】flask-mail电子邮件异步Asynchronous

    系统环境:Ubuntu 18.04.1 LTS Python使用的是虚拟环境:virutalenv Python的版本:Python 3.6.9 flask-mail电子邮件异步Asynchronou ...

  9. 关于Quartz .NET(V3.0.7)的简要说明

    目录 0. 任务调度 1. Quartz .NET 1.1 基本概念 1.2 主要接口和对象 2. 使用示例 2.0 准备工作 2.1 每间隔一定时间间隔执行一次任务 2.3 某天的固定时间点执行任务 ...

  10. 小米官网轮播图js+css3+html实现

    官网轮播: 我的轮播: 重难点: 1.布局 2.图片和右下角小圆点的同步问题 3.setInterval定时器的使用 4.淡入淡出动画效果 5.左右箭头点击时,图片和小圆点的效果同步 6.另一种轮播思 ...