(function(win,doc){ 
  change();
  function change(){
    doc.documentElement.style.fontSize = doc.documentElement.clientWidth *20/320+'px';
  }
  win.addEventListener('resize',change,false);
  win.addEventListener('orientationchange',change,false); /* 这个是移动端设备横屏、竖屏转换时触发的事件处理函数 */
})(window,document);

相关链接:https://segmentfault.com/q/1010000015609365/a-1020000015609802

rem布局,根据不用设备分辨率更改跟字体大小的更多相关文章

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

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

  2. 移动端适配rem为单位的rem.js及个别设备设置了大字体模式,导致页面变形的处理方式

    这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...

  3. 更改spinner字体大小

    做下拉框的时候,我采用的是spinner和string-array,因为比较简单. 可是整个界面的字体大小与下拉框里面的字体大小不符合,所以我们要更改spinner里面的字体大小. 方法是: 在布局中 ...

  4. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  5. 第132天:移动web端-rem布局(进阶)

    rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...

  6. 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  7. 响应式自适应布局代码,rem布局

    响应式自适应布局代码 首先是先设置根字体大小,PC端一般是16px为根字体,移动端会有不同的,根据情况来设置 js部分 document.querySelector('html').style.fon ...

  8. Android手机在不同分辨率情况下字体自适应大小

    两种解决方法: 一. 1.首先根据不同分辨率获取不同字体大小. 在RES里创建values-480x320/strings.xml 里面设置<dimen name="Text_size ...

  9. rem根据网页的根元素(html)来设置字体大小

    rem根据网页的根元素来设置字体大小,和em(font size of the element)的区别是,em是根据其父元素的字体大小来设置,而rem是根据网页的跟元素(html)来设置字体大小

随机推荐

  1. C++面试笔记--单链表

    1.编程实现单链表删除节点.       解析:如果删除的是头节点,如下图: 则把head指针指向头节点的下一个节点.同时free p1,如下图所示: 如果删除的是中间节点,如下图所示: 则用p2的n ...

  2. [译]Javascript substring实例

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  3. java反射机制的粗略理解

    java反射机制: 涉及的对象:Class, Object, 函数:Class类:[forName(String className):static:getClass():public],Object ...

  4. raspberry pi 3 openjdk 性能低下解决方法

    在使用nutch 是时候发现generate的性能很低,应该是openjdk的问题. orcale 实际已经提供了armhf的jdk,替换下性能就上去了 jdk下载链接:Download 配置方法和普 ...

  5. Data Base sql server 备份数据库

    sql server 备份数据库 1.维护计划向导: 右键维护计划-维护计划向导-然后安装提示: 勾选自己要干的事,比如:完整备份数据库.差异备份数据库等等 2.作业计划: 如下图: SQL Serv ...

  6. jmeter测试报告汉化及脚本编写

    在做接口自动化时,生成的测试报告页面是英文的,如现在我们优化成汉文.操作如下: 1,下载汉化包 下载路径:https://i.cnblogs.com/Files.aspx?order=1 2,解压汉化 ...

  7. 乱序优化与GCC的bug

      以下内容来自搜狗实验室技术交流文档,搜狐公司研发中心版权所有,仅供技术交流   摘要 --------- 乱序优化是现代编译器非常重要的特性,本文介绍了什么是乱序优化,以及由此引发的一个bug,希 ...

  8. Python——用socket和线程实现全双工收发数据

    用socket和线程实现全双工收发数据 1.基础知识 Socket(套接字) 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.由此知道套接字是全双工的. 线程 ...

  9. jdbcType DATE和TIMESTAMP区别

    当传入null值时,jdbcType 会防止null空指针异常报错 Mybatis 中 jdbcType =DATE,日期精确到年月日 剩余分秒 填0补齐 jdbcType= TIMESTAMP,日期 ...

  10. SQL基础(一)

    经过这段时间对SQL的基础学习,下面对自己的学习做个总结或者也可以说是个回顾吧! 我练习的是在oracle数据库平台上,并且安装了PLSQL Developer工具.下面是我从小白开始一路学习的回顾: ...