window.onload=function(x){if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {}, false);};function w(){var a=r.getBoundingClientRect().width;a>750&&(a=750*v),x.rem=a/15,r.style.fontSize=x.rem+"px"}var v,u,t,s=x.document,r=s.documentElement,q=s.querySelector('meta[name="viewport"]'),p=s.querySelector('meta[name="flexible"]');if(q){var o=q.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);o&&(u=parseFloat(o[2]),v=parseInt(1/u))}else{if(p){var o=p.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);o&&(v=parseFloat(o[2]),u=parseFloat((1).toFixed(2)))}}if(!v&&!u){var n=(x.navigator.appVersion.match(/android/gi),x.navigator.appVersion.match(/iphone/gi)),v=x.devicePixelRatio;v=n?v>=3?3:v>=2?2:1:1,u=1/v}if(r.setAttribute("data-dpr",v),!q){if(q=s.createElement("meta"),q.setAttribute("name","viewport"),q.setAttribute("content","initial-scale="+u+", maximum-scale="+u+", minimum-scale="+u+", user-scalable=no"),r.firstElementChild){r.firstElementChild.appendChild(q)}else{var m=s.createElement("div");m.appendChild(q),s.write(m.innerHTML)}}x.dpr=v,x.addEventListener("resize",function(){clearTimeout(t),t=setTimeout(w,300)},!1),x.addEventListener("pageshow",function(b){b.persisted&&(clearTimeout(t),t=setTimeout(w,300))},!1),"complete"===s.readyState?s.body.style.fontSize=12*v+"px":s.addEventListener("DOMContentLoaded",function(){s.body.style.fontSize=12*v+"px"},!1),w()}(window);

把上面这段代码放入js中,之后设置字体rem,在屏幕宽度为750px内时字体会根据屏幕缩小而缩小,

响应式字体(js控制)的更多相关文章

  1. Notyf - 超级简单、响应式的 JS 通知插件

    通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示      免费下载 ...

  2. web app响应式字体设置!rem之我见

    之前做沙漠教育的时候,直接以设计图为准,然后强暴式,缩放处理.简单.直接,粗暴!但是,开发快.……一劳永逸! 但那是,现在开发,作为业界良心:是不能那么做的!(那个是被逼的啊 首先看代码: @medi ...

  3. 仿响应式html:JS来判断页面是在手机端还是在PC端打开的方法

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/a419419/article/detail ...

  4. 利用JS去做响应式布局

    利用JS去做响应式布局 js动态改变布局方式 // 取浏览器可视区高宽 var lw = $(window).width(); var lh = $(window).height();// 页面加载完 ...

  5. css 字体单位之间的区分以及字体响应式实现

    问题场景: 在实现响应式布局的过程中,如何设置字体大小在不同的视窗尺寸以及不同的移动设备的可读性? 需要了解的有: 1.px,em,pt之间的换算关系 1em = 16px 1px  = 1/16 e ...

  6. html5/css3响应式页面开发总结

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

  7. rem字体响应式布局

    引用js,自动算字体大小,响应式布局 <script> var iScale = 1; iScale = iScale / window.devicePixelRatio; documen ...

  8. Intention.js – 动态重构 HTML 为响应式模式

    Intention.js 提供一个轻量级的和明确的方式,帮助你动态重组 HTML,成为响应式的方式.操作方法都放在了元素自己里面,所以灵活的布局看起来就似乎不会那么的抽象和凌乱. 您可以轻松地增加布局 ...

  9. Glide.js:响应式 & 触摸友好的 jQuery 滑块插件

    Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...

随机推荐

  1. C 语言学习:班级同学的博客地址列表

    这里整理出本班级同学的博客地址.请各位同学之间相互帮助,尽快将博客都建立起来. 编号 学号 姓名 Cnblogs昵称 博客地址 Coding.net 地址 1 160809401 付胤 付胤 http ...

  2. Oracle 11g导出空表、少表的解决办法

    ORACLE 11G中有个新特性,当表无数据时,不分配segment,以节省空间. 解决方法: 1)insert一行,再rollback就产生segment了 该方法是在在空表中插入数据,再删除,则产 ...

  3. DOSBOX 自动挂载技巧

    DOSBOX下载之后,win10已经不支持debug了(win-XP虚拟机有!),所以需要单独下载,每次使用都需要挂载上去,十分不方便. 解决办法是修改属性文件,每次挂载都自动执行: 把编写好的汇编文 ...

  4. iOS7时代我们用什么来追踪和识别用户?

    要识别用户,首先就是要选择一个标识符,通过这个标识符来识别这个用户的设备(而不是用户),这个标识符要能够保证一个设备上返回的值是一样的,并且在其他设备上不会出现相同的值. 在iOS7之前,曾经有过很多 ...

  5. ArcGIS Server开发教程系列(3)切片

    切片工作,我们可以一级一级的切,也可以,所有的一块切,Recreate All Tiles这项是说,在没有进行任何的切片工作时,可以选用这项:Recreate Empty Tiles这项是说,如果之前 ...

  6. 高版本api在低版本中的兼容

    直接上例子,看如何避免crash. eg:根据给出路径,获取此路径所在分区的总空间大小. 文档说明:获取文件系统用量情况,在API level 9及其以上的系统,可直接调用File对象的相关方法,以下 ...

  7. C++ 11 中的右值引用

    C++ 11 中的右值引用 右值引用的功能 首先,我并不介绍什么是右值引用,而是以一个例子里来介绍一下右值引用的功能: #include <iostream>    #include &l ...

  8. Filter体现职责链模式

    1. 前言 Filter—Filter 技术是servlet2.3 新增加的功能.完成的流程:对用户请求进行预处理,接着将请求交给Servlet进行处理并生成响应,最后Filter再对服务器响应进行后 ...

  9. C语言基础(2)-常量

    常量就是在程序运行中不可变化的量. #define #define MAX 100 定义了一个常量名字叫MAX,值是100,用#define定义的常量一般用大写字母. #define是一个预编译指令, ...

  10. 【09-14】eclipse学习笔记

    eclipse安装class文件反编译插件jadClipse /** 1. 下载JadClipse的jar包 2. 下载Jad反编译器 3. 将JarClipse jar包放到eclipse plug ...