深圳专业网站设计公司地址,现在注册公司需要什么条件,人才招聘网最新招聘2023,html5从入门到精通原本想直接引入原文链接#xff0c;但是又担心作者哪天想不开注销账号#xff0c;这么好的一篇文章看不到了#xff0c;还是转载一下吧(/ω#xff3c;)。 另外推荐一篇好文#xff1a;移动端rem自适应实操讲解
本文讲的通过 flexible.js 实现了rem自适应#xff0c;有了…原本想直接引入原文链接但是又担心作者哪天想不开注销账号这么好的一篇文章看不到了还是转载一下吧(/ω)。 另外推荐一篇好文移动端rem自适应实操讲解
本文讲的通过 flexible.js 实现了rem自适应有了 flexible.js我们就不必再为移动端各种设备兼容烦恼flexible.js 是如何通过 rem 实现自适应的呢一起来看看 通过 rem 与 px 的换算你可以把设计稿从 px 转到 rem。再也不用为各种设备横行而担忧。
rem是相对于根元素 html这样就意味着我们只需要在根元素确定一个 px 字号则可以来算出元素的宽高。1rem16px(浏览器html的像素可以设定这个基准值假如浏览器的 html 设为 64px则下面的元素则 1rem64px 来运算。 阿里团队开源的一个库。使用 flexible.js 轻松搞定各种不同的移动端设备兼容自适应问题
实现方法
通过js来调整html的字体大小而在页面中的制作稿则统一使用rem这个单位来制作。关键代码如下
;(function(win, lib) {var doc win.document;var docEl doc.documentElement;var metaEl doc.querySelector(meta[nameviewport]);var flexibleEl doc.querySelector(meta[nameflexible]);var dpr 0;var scale 0;var tid;var flexible lib.flexible || (lib.flexible {});if (metaEl) {console.warn(将根据已有的meta标签来设置缩放比例);var match metaEl.getAttribute(content).match(/initial-scale([d.])/);if (match) {scale parseFloat(match[1]);dpr parseInt(1 / scale);}} else if (flexibleEl) {var content flexibleEl.getAttribute(content);if (content) {var initialDpr content.match(/initial-dpr([d.])/);var maximumDpr content.match(/maximum-dpr([d.])/);if (initialDpr) {dpr parseFloat(initialDpr[1]);scale parseFloat((1 / dpr).toFixed(2)); }if (maximumDpr) {dpr parseFloat(maximumDpr[1]);scale parseFloat((1 / dpr).toFixed(2)); }}}if (!dpr !scale) {var isAndroid win.navigator.appVersion.match(/android/gi);var isIPhone win.navigator.appVersion.match(/iphone/gi);var devicePixelRatio win.devicePixelRatio;if (isIPhone) {// iOS下对于2和3的屏用2倍的方案其余的用1倍方案if (devicePixelRatio 3 (!dpr || dpr 3)) { dpr 3;} else if (devicePixelRatio 2 (!dpr || dpr 2)){dpr 2;} else {dpr 1;}} else {// 其他设备下仍旧使用1倍的方案dpr 1;}scale 1 / dpr;}docEl.setAttribute(data-dpr, dpr);if (!metaEl) {metaEl doc.createElement(meta);metaEl.setAttribute(name, viewport);metaEl.setAttribute(content, initial-scale scale , maximum-scale scale , minimum-scale scale , user-scalableno);if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(metaEl);} else {var wrap doc.createElement(div);wrap.appendChild(metaEl);doc.write(wrap.innerHTML);}}function refreshRem(){var width docEl.getBoundingClientRect().width;if (width / dpr 540) {width 540 * dpr;}var rem width / 10;docEl.style.fontSize rem px;flexible.rem win.rem rem;}win.addEventListener(resize, function() {clearTimeout(tid);tid setTimeout(refreshRem, 300);}, false);win.addEventListener(pageshow, function(e) {if (e.persisted) {clearTimeout(tid);tid setTimeout(refreshRem, 300);}}, false);if (doc.readyState complete) {doc.body.style.fontSize 12 * dpr px;} else {doc.addEventListener(DOMContentLoaded, function(e) {doc.body.style.fontSize 12 * dpr px;}, false);}refreshRem();flexible.dpr win.dpr dpr;flexible.refreshRem refreshRem;flexible.rem2px function(d) {var val parseFloat(d) * this.rem;if (typeof d string d.match(/rem$/)) {val px;}return val;}flexible.px2rem function(d) {var val parseFloat(d) / this.rem;if (typeof d string d.match(/px$/)) {val rem;}return val;}})(window, window[lib] || (window[lib] {}));从上面的代码主要是改变了 dpx 和 document 的 font-size 大小。大小为 docEl.getBoundingClientRect().width / 10 px; 假设我们的设计稿宽是 640 的则 html 的字体大小则被设为 64px 。则相当于1rem64px。 假如一个元素的宽是 160px ,在平时我们可以采用百分比可以做到自适应假如使用响应式的话可能需要设置多个比如在 320px输出 80px而在 640px 输出160px 等。 而采用以上 rem 的方法则只需要输出 2.5rem 就能实现统一如下表格
设备宽度320px360px414px640pxHtml字体大小32px36px41.4px64px实际输出1rem1rem1rem1rem设计稿缩放大小80px90px103.5px160px实际输出2.5rem2.5rem2.5rem2.5rem
以上的 2.5rem 是怎么得出的呢 160/641rem的基数为64px2.5rem ;按照官方的说法640px举例 Flexible 会将视觉稿分成100份 主要为了以后能更好的兼容 vh 和 vw而每一份被称为一个单位 a。同时 1rem 单位被认定为 10a。针对我们这份视觉稿可以计算出(设计稿为 750px 为例
1a 7.5px
1rem 75px 那么我们这个示例的稿子就分成了 10a也就是整个宽度为 10remhtml 对应的 font-size 为 75px 这样一来对于视觉稿上的元素尺寸换算只需要原始的 px 值除以 rem 基准值即可。例如此例视觉稿中的图片其尺寸是 176px * 176px ,转换成为2.346667rem * 2.346667rem。 本人理解写移动端页面时让设计人员将设计稿设计成宽为 640px方便计算。因为当时的主流是iPhone5及iPhone5s物理像素宽度为 640分辨率为320。 如上图当我们把分辨率调为 320 时flexible.js 经过计算后可以看到 html 的 font-size 已经是 32 px了也就是屏幕宽度 320 除以10的结果。 而此时设计稿是 640px 宽的假设某个元素在设计稿上的宽为 128px那么在实际开发中我们要把它在 320px 的基础上计算即开发时 128px/2/34px2rem。 flexible分析px转rem的插件工具 另外大漠还写了一篇详细的文章使用 Flexible实现手淘H5页面的终端适配 里面介绍了一个如何快速转换rem为px的几种方法感兴趣的童鞋可以去看看。 也可以看这篇文章Sass函数功能——rem转px 另外在使用这个来处理自适应的另一个坑就是css sprite作者的建议是使用svg或者icon font.或者base64等其他方案。 另外就是在dpr2时小图片可能会出现模糊建议以最大的图片来切图。 字体建议使用 px
在作者的观点中是建议描述性的字体使用px如果有slogan之类大于48px的可以使用rem由于使用rem在iPhone5和iPhone6中字体不同可能出现13px和15px,点阵字体。 显然我们在iPhone3G和iPhone4的Retina屏下面希望看到的文本字号是相同的。也就是说我们不希望文本在Retina屏幕下变小另外我们希望在大屏手机上看到更多文本以及现在绝大多数的字体文件都自带一些点阵尺寸通常是16px和24px所以我们不希望出现13px和15px这样的奇葩尺寸。 如此一来就决定了在制作H5的页面中rem并不适合用到段落文本上。所以在Flexible整个适配方案中考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。
style
div { // 默认写上dpr为1的fontSizewidth: 1rem; height: 0.4rem;font-size: 12px;
}
[data-dpr2] div {font-size: 24px;
}
[data-dpr3] div {font-size: 36px;
}
/style为了能更好的利于开发在实际开发中我们可以定制一个font-dpr()这样的Sass混合宏
style
mixin font-dpr($font-size){font-size: $font-size;[data-dpr2] {font-size: $font-size * 2;}[data-dpr3] {font-size: $font-size * 3;}
}
/style有了这样的混合宏之后在开发中可以直接这样使用
include font-dpr(16px);当然这只是针对于描述性的文本比如说段落文本。但有的时候文本的字号也需要分场景的比如在项目中有一个slogan,业务方希望这个slogan能根据不同的终端适配。针对这样的场景完全可以使用rem给slogan做计量单位。 由于使用 rem要根据 rem 的数值来定就像200*200在分辨为 320px 下计算成 rem 后会出现小数而对于字体来说当然不要有小数或者像 13px15px 这种奇葩的字体所以这里建议要么把字体 px 定死要么自己手写媒体查询吧。 如果你下载完看过源码那你就知道Flexible对屏幕的宽度做了一个小的限制在你的屏幕宽度540px的时候html的 font-size 依然会是 54px也就是当你把屏幕宽度设置为 640px 的时候html 的 font-size 是 54px。 所以如果你想兼容更大尺寸的屏幕那就把这段代码删掉好了。
