响应式字体(js控制)
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控制)的更多相关文章
- Notyf - 超级简单、响应式的 JS 通知插件
通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示 免费下载 ...
- web app响应式字体设置!rem之我见
之前做沙漠教育的时候,直接以设计图为准,然后强暴式,缩放处理.简单.直接,粗暴!但是,开发快.……一劳永逸! 但那是,现在开发,作为业界良心:是不能那么做的!(那个是被逼的啊 首先看代码: @medi ...
- 仿响应式html:JS来判断页面是在手机端还是在PC端打开的方法
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/a419419/article/detail ...
- 利用JS去做响应式布局
利用JS去做响应式布局 js动态改变布局方式 // 取浏览器可视区高宽 var lw = $(window).width(); var lh = $(window).height();// 页面加载完 ...
- css 字体单位之间的区分以及字体响应式实现
问题场景: 在实现响应式布局的过程中,如何设置字体大小在不同的视窗尺寸以及不同的移动设备的可读性? 需要了解的有: 1.px,em,pt之间的换算关系 1em = 16px 1px = 1/16 e ...
- html5/css3响应式页面开发总结
一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
- rem字体响应式布局
引用js,自动算字体大小,响应式布局 <script> var iScale = 1; iScale = iScale / window.devicePixelRatio; documen ...
- Intention.js – 动态重构 HTML 为响应式模式
Intention.js 提供一个轻量级的和明确的方式,帮助你动态重组 HTML,成为响应式的方式.操作方法都放在了元素自己里面,所以灵活的布局看起来就似乎不会那么的抽象和凌乱. 您可以轻松地增加布局 ...
- Glide.js:响应式 & 触摸友好的 jQuery 滑块插件
Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...
随机推荐
- jquery-leonaScroll-1.2-自定义滚动条插件
leonaScroll-1.2.js 下载链接地址:http://share.weiyun.com/bb531dd6b1916c0023c176897182dc15 (密码:iZck)[内含压缩版] ...
- How to step through your code in chrome
By executing code one line or one function at a time, you can observe changes in the data and in the ...
- 【转载】浅谈HTTP中Get与Post的区别
[转载]http://www.cnblogs.com/hyddd/ Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们 ...
- 冰冻三尺非一日之寒--rabbitMQ,redis
第11章 1.rabbitMQ 2. redis 一.rabbitMQ: 人们写了有好多好多的开源的MQ服务器.其中大多数都是写出来用来解决特定问题的.它们不关心上面跑的是什么类型的消息,设计思想 ...
- 【USACO 2.4 】Bessie Come Home
题意:给出n条有权的双向边(10000),求到达Z最近的大写字母,及其距离. 题解:即求Z出发的最短路,用dijstra就可以了,注意边要开到20000以上. /* TASK: comehome LA ...
- 菜鸟初识python request属性及方法说明
if request.REQUEST.has_key('键值'): HttpRequest对象的属性 参考: 表 H-1. HttpRequest对象的属性 属性 描述 path 表示提交请求页面完 ...
- markdown测试
测试 1.第一点 这一点 代码块 @requires_authorization def somefunc(param1='', param2=0): '''A docstring''' if par ...
- MyEclipse导入jquery-1.8.0.min.js等文件报错的解决方案
1.选中报错的jquery文件例如"jquery-1.8.0.min.js". 2.右键选择 MyEclipse-->Exclude From Validation . 3. ...
- JS-面向对象
话说,再次看完这个实例后的我,开始怀疑面向对象和JSON的区别...并开始怀疑这是面向对象的真实性 <!DOCTYPE html> <html> <head> &l ...
- C#对文件/目录的操作:Path、File、Directory、FileStream、StreamReader、StreamWriter等类的浅析
以下类的命名空间都是:System.I/0; 一.Path:主要对文件路径的操作! 常用方法: String path=@"C:\a\b\c\123.txt"; 1-1.Path. ...