(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. sequoiadb的c++应用开发1

    使用sequoiadb开发c++应用时需要使用BSON对象,本篇主要讲下BSON的操作方面的东西 1:构建一个_id的BSON对象 BSON的c++驱动给我提供了一个宏BSON,使用该对象可以很方便的 ...

  2. 'module' object has no attribute 'contrib'

    Problem solved, turns i had 2 tensorflow versions installed: When launching $python , it used 0.6 ve ...

  3. delphi xe6 android ListView增加 Header或Footer 的方法

    var  Item1: TListViewItem;begin    Item1 := ListView1.Items.Add;    Item1.Purpose:=TListItemPurpose. ...

  4. Dojo Javascript 编程规范(转)

    前言 相当不错的 Javascript 编程风格规范,建议大家采用此规范编写 Javascript.原文链接: http://dojotoolkit.org/developer/StyleGuide ...

  5. SQLServer数据库,表内存,实例名分析SQL语句

    --数据库内存分析 USE master go DECLARE @insSize TABLE(dbName sysname,checkTime VARCHAR(19),dbSize VARCHAR(5 ...

  6. 洛谷 P1879 [USACO06NOV]玉米田Corn Fields

    题目描述 Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ M ≤ 12; 1 ≤ N ...

  7. ubuntu - 14.04,安装Go语言(谷歌公司开发的一种语言)

    Go语言下载地址:https://storage.googleapis.com/golang/go1.5.1.linux-amd64.tar.gz 安装: 1,以root身份在shell里执行: ta ...

  8. Django博客开发教程,Django快速开发个人blog

    学DjangoWEB框架,估计大部分的朋友都是从Blog开发开始入门的,Django中文网发布了一个Django开发教程,这个教程简单易懂,能让你快速的使用Django开发一个漂亮的个人blog,是D ...

  9. 插头DP学习笔记

    插头DP(我也不知道该怎么定义...)是一种类似于洛谷题目([模板]插头DP)的题目 题目特征为: 在棋盘上 某一维的数据范围很小 完全铺满 计数问题 直接看题吧. [模板]插头DP 给出n*m的方格 ...

  10. 邮件服务器启动postfix时的问题:master 已死,但 pid 文件仍存

    [root@linux115 ~]# service postfix restart  // 重启postfix关闭 postfix:[失败]  启动 postfix: [确定][root@linux ...