原生js移动端字体自适应方案

自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案,

代码如下:

 1 (function(doc, win) {
 2     var docEl = doc.documentElement,
 3         resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
 4         recalc = function() {
 5             var clientWidth = docEl.clientWidth;
 6             if (!clientWidth) return;
 7             if (clientWidth >= 800) {
 8                 docEl.style.fontSize = ‘100px‘;
 9             } else {
10                 docEl.style.fontSize = 100 * (clientWidth / 800) + ‘px‘;
11             }
12         };
13
14     if (!doc.addEventListener) return;
15     win.addEventListener(resizeEvt, recalc, false);
16     doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
17 })(document, window)

回来因为新开发业务需要,研究了淘宝二楼移动端的代码,发现他们采用的是另一种自适应方案,如下

 1 (function(doc, win) {
 2     var docEl = doc.documentElement,
 3         resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
 4         recalc = function() {
 5             var clientWidth = docEl.clientWidth;
 6             if (!clientWidth) return;
 7
 8             docEl.style.fontSize=clientWidth/10+‘px‘;
 9         };
10
11     if (!doc.addEventListener) return;
12     win.addEventListener(resizeEvt, recalc, false);
13     doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
14 })(document, window)

哈哈,区别不大。至于到底具体在业务中有什么差别,还没发现。希望知道的留言指点。

后来,无意间发现了淘宝实际采用的是一个自适应的库:flexible.js,

这个库本质是对根元素字体大小还有分辨率(dpx)的修改,有人写了一篇介绍文章:https://github.com/amfe/article/issues/17?utm_source=caibaojian.com

本文结束。

原文地址:https://www.cnblogs.com/zhensg123/p/8686624.html

时间: 2024-11-07 17:29:35

原生js移动端字体自适应方案的相关文章

纯原生js移动端图片压缩上传插件

前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于jquery.zepto的(这句话似乎吐槽次数太多了...),然后我也就不吐槽了, 然后当然是自己做了,先上图: 纯原生js的移动端图片压缩上传插件,不依赖任何库 用法 在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id,写法如下: <div cla

原生js移动端touch事件实现上拉加载更多

大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: 1 //获取要操作的元素 2 var objSection = document.getElementsByTagName("div")[0]; 3 //给元素绑定监听事件 个人习惯把监听事件写在一块 4 objSection.addEventListener("touchstart", touchStart, false); 5 objSect

原生JS,前端压缩图片方案

在移动互联网高速发展的今天,有太多太多的应用需要用户在移动Web上传图片文件.然而在上传图片前就对图片进行了压缩处理,从而提高图片的上传效率,减少用户的流量浪费,后台处理和用户体验也会得到提升. 为什么要这样做 遇到的问题: 1:在低网速下上传图片进度缓慢,用户体验差 2:后台处理较大的文件压力大. 3:业务需求要求文件大小..等等(或许还有更多) 在处理以上问题之前,需要给自己一些疑问 1:图片是否有必要保存原图 2:主要使用场景在移动端还是在PC端(图片处理消耗的性能和速度需要考虑) 3:需

原生js移动端可拖动进度条插件

该插件最初的想法来自网上的一篇文章,直达链接:https://www.cnblogs.com/libin-1/p/6220056.html 笔者因为业务需要寻找到这个插件,然后拿来用之,发现各种不方便,然后便开始了改造之路. 上代码: 1 <script> 2 function dragSlide(id) { 3 this.minDiv =document.getElementById(id); //小方块 4 5 this.width = parseInt(window.getCompute

移动端自适应方案

本文来自大搜车博客:移动端自适应方案,主要讲:1.移动真的需要动态生成viewport吗?2.移动前端如何自适应?作者给出主观的最佳实践:最帅的flex.演示地址.里面讲了一些互联网公司的自适应做法,可以看看. 研究样本 手淘 ml.JS 天猫首页 手机携程 一个月前去了css开发者大会,听到了手淘的自适应方案,想起之前一直就想了解ml.js到底干了什么事.回来仔细研究了一下,抱着好奇心一并看了同样类型的网站的方案,深入学习一下. 研究结论 手淘 获取手机dpr(window.devicePix

(转)移动端自适应方案

研究样本 手淘 ml.js 天猫首页 手机携程 一个月前去了css开发者大会,听到了手淘的自适应方案,想起之前一直就想了解ml.js到底干了什么事.回来仔细研究了一下,抱着好奇心一并看了同样类型的网站的方案,深入学习一下. 研究结论 手淘 获取手机dpr(window.devicePixelRatio),动态生成viewport. 换取手机宽度,分成10份,每一份的宽度即是rem的尺寸. 根据设计稿尺寸(px)通过计算,转换成rem去布局. ps:海外淘宝并没有这样做,而是scale1.0并且图

浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应

随着3G的普及,越来越多的人使用手机上网.移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?本篇文章将讲述自适应网页设计的概念和方法,使网页开发人员维护同一个网页代码,即可使网站在多种设备上具有更好的阅读体验.本文详细介绍了自适应网页的实现方法,希望能给迷惑的你带来帮助. 一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,

原生js实现移动端Touch轮播图的方法步骤

Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 /* 清除标签默认边距 */ body,ul,li,ol,im

告别组件之教你使用原生js和css写移动端轮播图

在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. 老规矩,首先看一下最终效果,这个最终可以实现定时自动播放,触摸滑动,手动修改下面横条效果等功能. 项目中使用到的HTML代码如下 <div class="banner"> <ul class="clearfix"> <li><