(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. wordcount小程序

    wordcount小程序 (1)github网址 https://github.com/yuyuyu960818/count_txt_file (2)PSP表 PSP2.1 PSP阶段 预估耗时 (分 ...

  2. Socket编程--并发server

    Socket地址复用 int getsockopt(int sockfd, int level, int optname, void *optval, socklen_t *optlen); int ...

  3. 解决Mac版微信小程序开发工具打开后无法显示二维码

    问题描述: 正常情况下,打开微信小程序开发工具后,首页提示扫描二维码进行登陆,但是如果不显示二维码,当然无法登陆. 解决方案: 无法显示二维码肯定是程序运行哪里出错了,我们直接点击桌面图标是无法排查错 ...

  4. 树莓派(Raspberry Pi 3) 使用wifi模块连接网络

    树莓派3B内置了wifi和蓝牙模块,启动WIFI模块有两种方式,一种是图形界面,一种是命令行模式. 使用图形界面: 在桌面右上角的菜单栏里面选择wifi,输入密码就可以了. 使用命令行: 第一步:配置 ...

  5. 关于 node-sass 安装失败的问题

    最近换了一台计算机,使用ionic+cordova 开发,过程中发现node-sass 总是安装失败,经过搜索之后,发现可能是由于国内被墙导致的,找到了解决办法记录一下: 使用taobao 的镜像,成 ...

  6. 温故而知新_C语言_前缀++(--)和后缀++(--)

    前缀++(--)和后缀++(++)是有区别的. 再单独使用的时候是没有区别的,都是自身递增或者递减1. 但是综合使用起来会一样吗? 下面的例子都是++,替换成--也是一样,道理都是一样的. 请先看下面 ...

  7. 静态-static

    静态 1. 静态初始化块 (1)可初始化类的静态字段 (2)静态初始化块只调用一次 (3)创建子类时会调用父类的静态初始化块 源代码: class Root { static{ System.out. ...

  8. 使用hexo搭建博客并上传GitHub

    之前在博客园.简书.CSDN等地儿都开过博,一篇文章写好了,我希望能在几个平台可以同步发布,可是操作起来成本不低.几个平台下的富文本编辑器比较起来还是博客园更顺手,看着更舒服,尤其是代码块的操作灵活. ...

  9. 【火车出栈】ZOJ - 2603 Railroad Sort

    好久没写递归了,怕手生再来练练手. 题意:车轨上有上图所示的n个中转栈,现有2n个列车,给出列车初始编号序列.列车从最右边驶入车轨,并且列车只能从右向左移动,要求给出列车中转操作序列,使列车经过这n个 ...

  10. P4332 [SHOI2014]三叉神经树

    \(\color{#0066ff}{ 题目描述 }\) 计算神经学作为新兴的交叉学科近些年来一直是学术界的热点.一种叫做SHOI 的神经组织因为其和近日发现的化合物 SHTSC 的密切联系引起了人们的 ...