(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. 形式化验证工具(PAT)羊车门代码学习

    首先介绍一下PAT工具,下图是PAT工具的图标 PAT工具全称是Process Analysis Toolkit,可以做一些简单的验证. 今天我们分析一下例子里面的Monty Hall Problem ...

  2. Batch Normalization 与Dropout 的冲突

    BN或Dropout单独使用能加速训练速度并且避免过拟合 但是倘若一起使用,会产生负面效果. BN在某些情况下会削弱Dropout的效果 对此,BN与Dropout最好不要一起用,若一定要一起用,有2 ...

  3. 数据结构_成绩查询_cjcx

    问题描述 录入 n 个学生的成绩,并查询.★数据输入第一行输入包括 n. m(1<=n<=50,000,1<=m<=100,000)两个数字.接下来 n 行,每行包含名字和成绩 ...

  4. java全栈day09----继承 抽象类

    01继承的概述 在Java中,类的继承是指在一个现有类的基础上去构建一个新的类, 构建出来的新类被称作子类,现有类被称作父类在java中 继承如何来实用呢?举个例子 继承的定义格式和使用 *A:继承的 ...

  5. Python--详解TKinter类库

    为了学习python3.5的tkinter,于是我去官网找了找相关部件的一些文档,读起来有点绕口,觉得还是自己来实践实践,看看视频感觉用处会更大,然后就有了下面的一部分常用的总结, 查看tkinter ...

  6. enumerate()函数

    for index,value in enumerate(list):       print index,value 等于for i in range(0,len(list)): print i,l ...

  7. 解决java.lang.IllegalStateException: BeanFactory not initialized or already closed - call 'refresh' before accessing beans via the ApplicationContext问题

    使用ClassPathXmlApplicationContext加载项目时, ClassPathXmlApplicationContext context = new ClassPathXmlAppl ...

  8. MyEclipse 基本使用(三)

    视频地址如下 https://pan.baidu.com/s/1boxK4LT#list/path=%2F%E5%8A%A8%E5%8A%9B%E8%8A%82%E7%82%B9%E8%A7%86%E ...

  9. HTML5与CSS3基础教程(第7版) 高清PDF扫描版​

    HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...

  10. 写一个Android输入法02——候选窗、转换

    上一篇介绍了完成Android输入法的最小化步骤,它只能将按键对应的字符上屏.一般的东亚语言都有一个转换的过程,比如汉语输入拼音,需要由拼音转成汉字再上屏.本文将在前文基础上加入完成转换过程所必需的候 ...