解决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. WEB渗透之扫描 - Nikto

    2020.0202 好事成双 Nikto 纯主动 识别软件版本 存在安全隐患的文件 配置漏洞 web应用安全隐患 避免404误判 使用 插件:nikto -list-plugins 避免404误判功能 ...

  2. C++ 顺序表练习

    #include <stdio.h> #include <stdlib.h> #include <string.h> struct Array //定义一个数据存储 ...

  3. 1分钟,带你上手“Markdown”语法

    前言 Markdown 是一种轻量级的标记语言,有 John Gruber 以及Aaron Hillel Swartz 一起编写.Aaron Hillel Swartz 是一个极富传奇的黑客,有兴趣可 ...

  4. BeanShell断言:根据响应的2个数据的比较结果来决定断言

    需求:目前有一个请求,请求的响应中有2个值,aaa和bbb,我们比较aaa和bbb,如果aaa大于bbb,则断言通过,否则失败. 1.添加一个Dummy Sampler,模拟请求. 2.添加2个正则表 ...

  5. 【盘它!】那些让效率MAX的工具和方法(Mac篇)

    一.前言 人类之所以伟大,是因为会创造并使用工具! 工欲善其事必先利器.高效的工具和方法不仅能最大化 节省我们的时间,还可以一定程度上让我们 保持专注,以达到 事半功倍 的效果. 但仅仅有工具不会使用 ...

  6. Selenium系列(一) - 8种元素定位方式的详细解读

    安装Selenium和下载Driver 安装selenium pip3 install  selenium -i http://pypi.douban.com/simple --trusted-hos ...

  7. 使用new Image()可以针对单单请求,不要返回数据的情况

    使用new Image()可以针对单单请求,不要返回数据的情况,比如我这里写了一个Demo,请求百度的Logo一个示例: <html> <head> </head> ...

  8. 推荐一款优秀的web自动化测工具

    在业务使用的自动化测试工具很多.有开源的,有商业化的,各有各得特色,各有各得优点!下面我就介绍几个我用过的一款非常优秀的国产自动化测试工具.在现有的自动化软件当中,都是以元素的name.id.xpat ...

  9. webpack打包es6代码

    1.简单描述一下es6的模块导入和导出的语法: //导出:export var aa = 10;export function demo(){} //不能写成:var aa = 10;export a ...

  10. 欢乐C++ —— 2. 深复制与浅复制

    1. 简述 ​ 通俗点讲,深复制与浅复制一般对指针而言, ​ 深复制复制指针所指向的内容, ​ 浅复制复制指针的值. 2. 举例 ​ 栗子: ​ 当我们有现在有指针A指向一块数据,和指针B. 深复制- ...