(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. backstop无法访问

    解决方案:重新build代码,重新启动虚拟机.再等一会儿,就OK了.

  2. Umbraco中如何找到home node

    在一个Umbraco项目中,我们经常会出现需要找到这个项目的home node的情况, 那么如何来找到项目的home node呢 方法如下: 1. 在View中 @inherits Umbraco.W ...

  3. 解决eclipse的source not found change at.

    eclise快捷键F3跳转到类的实现方法,出现如图所示问题:source not found change  atttached  source.点击下图红圈,Change Attached  Sou ...

  4. oracle安装和使用问题解决方案

    1.Enter the full pathname for java.exe 要输入的是32位系统的jdk中的java.exe路径,比如  C:\Program Files\Java\jdk1.6.0 ...

  5. [raspberry pi3] aarch64 mongodb 编译和安装

    raspberry pi3官方支持是32bit的系统,使用mongodb的时候有2G数据库大小的限制,32bit的系统上数据大点基本上就可以认为不能用了,所以要装64bit的opensuse. 安装了 ...

  6. Visual Studio 2017中如何创建安装打包项目

    从Visual Studio 2012开始,微软就不在环境中自动集成安装打包项目了,如果还想使用,需要手动下载安装,这里以在Visual Studio 2017上安装打包项目为例进行介绍,步骤如下: ...

  7. Easyui-交互式消息弹出框

    由于项目在优化的时候需要用到弹出框,按自己的想法是傻傻的用一些alert直接弹出得了,但是这样用户体验度不是特别好,影响界面美观,所以自己还是用了封装好的easyui给的消息框,怎么用呢,这个里面很有 ...

  8. uoj#420. 【集训队作业2018】矩形(组合数学)

    题面 传送门 题解 这辣鸡题目做了咱整整三天--咱果然还是太菜了--好珂怕的推倒啊-- 首先把它变成 \[\left( \sum_{i = 1}^{n} \sum_{j = 1}^{m} F(i, j ...

  9. Html再学

    1.  Html是网页的载体.内容就是网页制作者放在页面上想要用户浏览的信息,可以包括文字.图片.视频等. 2.  CSS样式是展现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边 ...

  10. Thinkphp手把手练习

    一.搭建thinkphp开发环境 准备条件:thinkphp框架 1.在Apache的www目录下新建文件夹,命名为thinkphp,可以将THinkPHP框架放在该目录中. 2.在thinkphp目 ...