JS 自动计算HTML的font-size
2023-09-11 14:16:39 时间
Rem尺寸解决方案,需要配合一些js动态设置<html>标签的font-size 和 viewport来配合
<script> (function(doc, win) { var dpr, rem, scale; var docEl = document.documentElement; var metaEl = document.querySelector('meta[name="viewport"]'); var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; /*isAndroid = navigator.userAgent.match(/(Android)/) ? true:false; isIos = navigator.userAgent.match(/(iPad|iPhone)/) ? true:false;*/ if (navigator.userAgent.match(/(Android)/)) { dpr = 1; } else { dpr = win.devicePixelRatio || 1; } scale = 1 / dpr; // 设置viewport,进行缩放,达到高清效果 metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no,shrink-to-fit=no'); // 设置data-dpr属性,留作的css hack之用 docEl.setAttribute('data-dpr', dpr); var recalc = function() { // if (docEl.style.fontSize) return; clientWidth = docEl.clientWidth; // console.log(clientWidth); if (!clientWidth) return; docEl.style.fontSize = clientWidth / 10 + 'px'; if (document.body) { document.body.style.fontSize = docEl.style.fontSize; } if (dpr == 1) { // 动态写入样式 var fontEl = document.getElementById('init_style'); var pxscale = clientWidth / 750; docEl.firstElementChild.appendChild(fontEl); fontEl.innerHTML = '.px-scale{transform:scale(' + pxscale + ') !important;-webkit-transform:scale(' + pxscale + ') !important;}'; //雪碧图缩放 } }; recalc(); // 给js调用的,某一dpr下rem和px之间的转换函数 window.rem2px = function(v) { v = parseFloat(v); return v * rem; }; window.px2rem = function(v) { v = parseFloat(v); return v / rem; }; window.dpr = dpr; window.rem = rem; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); // doc.addEventListener('touchstart', function(e) { e.preventDefault();}, false); })(document, window); </script>
这样一来,页面的所有css尺寸单位都得换成rem了。但计算又特别麻烦。有两种解决方案:
1、sass、less、postcss 的 @function
@charset 'utf-8'; $base-font-size: 75px; //design iphone6: 375px * 2 / 10 = 75px; --design // $base-font-size: 32px; //design iphone3gs: 320px / 10 = 32px // $base-font-size: 64px; //design iphone4/5: 320px * 2 / 10 = 64px // $base-font-size: 124.2px; //design iphone6: 414px * 3 / 10 = 124.2px; @function pxToRem($px) { @return $px / $base-font-size * 1rem; }
2、sublime Text 插件的解决方案
github地址:https://github.com/flashlizi/cssrem
http://www.cnblogs.com/CyLee/p/6494567.html
相关文章
- 常见js引擎在Android上性能对比
- JS框架_(coolShow.js)图片旋转动画特效
- JS框架_(JQuery.js)高德地图api
- JS框架_(Esign.js)仿信用卡电子签名特效
- JS框架_(JQuery.js)点赞按钮动画
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
- JS框架_(JQuery.js)图片相册掀开切换效果
- JS框架_(JQuery.js)上传进度条
- JS - 解决引入 js 文件无效的问题
- Node.js数据流Stream之Readable流和Writable流
- JS魔法堂:元素克隆、剪切技术研究
- JS 实现DIV 滚动至顶部后固定
- JS实现的表头列头固定页面功能示例
- [Node.js] Mock an API for Local Development in React with Mirage JS
- 让Visual Studio 也支持JS代码折叠 —— 续 [ Visual Studio | Js | ScriptOutline | SmallOutline ]
- 华为OD机试 - 最优高铁城市修建方案(Java & JS & Python)
- 华为OD机试 - 计算网络信号、信号强度(Java & JS & Python)
- 华为OD机试 - 连接器问题(Java & JS & Python)
- 华为OD机试 - 火星文计算(Java & JS & Python)
- 华为OD机试 - 计算疫情扩散时间(Java & JS & Python)
- js左划出现删除按钮,右滑隐藏demo效果示例(整理)
- js jquery vue 网络请求封装 服务器 后台
- JS实现鼠标悬停变色
- JS:crypto-js实现AES加密解密
- H5画布 canvas(三)canvas 库 Konva.js 的使用
- 【JS高级】js面向对象三大特性之继承_06
- js根据日期计算星期几效果demo(整理)