解决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. IOS7下,alertView不能使用addSubview添加textField解决办法

    UIAlertView *alertView1 = [[UIAlertView alloc] initWithTitle:@"Enter Form Name" message:@& ...

  2. 实验二 Samba服务器配置

    实验二 实 验 基 本 信 息 实验名称:Samba服务器配置 实验时间:    年 月 日 实验地点: 实验目的: 了解Samba环境及协议 掌握Samba的工作原理 掌握主配置文件Samba.co ...

  3. Azure CLI 简单入门

    Azure CLI 是什么 Azure 命令行接口 (CLI) 是用于管理 Azure 资源的 Microsoft 跨平台命令行体验. Azure CLI 易于学习,是构建适用于 Azure 资源的自 ...

  4. 一文掌握Redis的三种集群方案

    在开发测试环境中,我们一般搭建Redis的单实例来应对开发测试需求,但是在生产环境,如果对可用性.可靠性要求较高,则需要引入Redis的集群方案.虽然现在各大云平台有提供缓存服务可以直接使用,但了解一 ...

  5. SQL Server 存储过程 函数 和sql语句 区别

    存储过程与sql语句 存储过程的优点: 1.具有更好的性能   存储过程是预编译的,只在创建时进行编译,以后每次执行存储过程都不需再重新编译,   而一般 SQL 语句每执行一次就编译一次,因此使用存 ...

  6. vue列表中表单的验证

    先上效果图: 在点击确认的时候会验证带有验证的字段 嵌套逻辑: 表单 表格 表格项 表单项 表单项 表格项 表格 表单 代码部分: <!-- 注意此处的model,需要一个对象,而我们的数据是一 ...

  7. 如何快速高效率地学习Go语言

    要想快速高效率地掌握Go语言,关键是要通过不断写代码去训练,熟能生巧.方法是没问题的,但具体的路径呢?就像开车,能不能给个导航?我希望这篇文章能起到一个导航的作用,这里提供的路径,应该对很多人都适合. ...

  8. yarn安装Electron提示安装正常却实际没有安装的解决

    起因 使用Quasar框架开发Electron软件,配置好后发现electron没有正常安装,但是yarn却一本正经的胡说八道:不不不,electron已经在那里了.打开模块安装目录一看还真有elec ...

  9. 998. 最大二叉树 II

    最大树定义:一个树,其中每个节点的值都大于其子树中的任何其他值. 给出最大树的根节点 root. 就像之前的问题那样,给定的树是从表 A(root = Construct(A))递归地使用下述 Con ...

  10. 网络安全从入门到精通 (第二章-2) 后端基础SQL—MySQL数据库简介及SQL语法

    本文内容: 什么是数据库 常见数据库 数据库的基本知识 基本SQL语法 1,什么是数据库? 数据库就是将大量数据保存起来,通过计算机加工,可以高效访问的数据聚合. 数据库就是长期存储在计算机内,有组织 ...