原生js移动端字体自适应方案
自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案,
代码如下:
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= ) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = * (clientWidth / ) + 'px';
}
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window)
回来因为新开发业务需要,研究了淘宝二楼移动端的代码,发现他们采用的是另一种自适应方案,如下
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return; docEl.style.fontSize=clientWidth/+'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window)
哈哈,区别不大。至于到底具体在业务中有什么差别,还没发现。希望知道的留言指点。
后来,无意间发现了淘宝实际采用的是一个自适应的库:flexible.js,
这个库本质是对根元素字体大小还有分辨率(dpx)的修改,有人写了一篇介绍文章:https://github.com/amfe/article/issues/17?utm_source=caibaojian.com
本文结束。
原生js移动端字体自适应方案的更多相关文章
- 原生js移动端列表无缝间歇向上滚动
在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- 纯原生js移动端城市选择插件
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...
- 原生js移动端可拖动进度条插件
该插件最初的想法来自网上的一篇文章,直达链接:https://www.cnblogs.com/libin-1/p/6220056.html 笔者因为业务需要寻找到这个插件,然后拿来用之,发现各种不方便 ...
- 移动端rem自适应方案
一般设计师给我们的设计稿尺寸都为750*1340 .. 网易,淘宝移动端首页上html元素的font-size 目前就先说一下网易的做法 引入下面这段js,用于计算动态的font-size (func ...
- 纯原生js移动端日期选择插件
最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又 ...
- 原生js移动端滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- 移动端flex自适应方案。(px to rem)
define(function (require, exports, module) { exports.mobileUtilMethod = function () { (function (e, ...
随机推荐
- JAVA 中的文件读取
1. InputStream / OutputStream处理字节流抽象类:所有输入.输出(内存)类的超类,一般使用 FileInputStream / FileOutputStream 输出字符 u ...
- [STM32F4][关于看门狗的那些事]
STM32(stm32f4XX系列)看门狗的总结: 1. 具有两个看门狗外设(独立和窗口)均可用于检测并解决由软件错误导致的故障:当计数器达到给定的超时值时,触发一个中断(仅适用于窗口看门狗)或产生一 ...
- 1010 一元多项式求导 (25 分) C语言
设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为nxn−1.) 输入格式: 以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过 1000 的整数).数字间以空格分隔. ...
- [NOIP2017]列队(树状数组)
定义第i行为所有的点(i,j),0<j<m 可以发现,每一行是相对独立的,每一次操作只会影响到当前行和最后一列 考虑每一行和最后一列各开一个树状数组,但这样显然会爆空间 实际上,对于没有离 ...
- vue cli3超详细创建多页面配置
1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...
- 【Hutool】Hutool工具类之随机工具——RandomUtil
commons-lang中对应也有RanddomUtils.RandomStringUtils 直接从类结构开始入手: 基本都是见名知意了,就不一一展开:点开源码可以看到算是比较通俗易懂的对Rando ...
- c/c++链表的实现
#include<iostream> #include<string> #define SIZE 3 using std::cout; using std::endl; usi ...
- [python]PyCharm安装与激活
一.安装 1.去官网下载安装包(http://www.jetbrains.com/pycharm/download/#section=windows) 2.下载完成之后双击即可点击安装,按照自己需求选 ...
- Java:当前线程运行完毕,再运行后续逻辑
一.问题描述 在程序设计中,可能存在这样的情景:主线程中存在一个子线程,子线程需要在执行完毕后为后续代码逻辑提供参数.但在代码执行时,子进程还没执行完毕,后续的代码已经开始执行了,这时候就会出现参数为 ...
- MyBatis-SpringMVC整合
1.添加spring相关jar包 2.配置ehcache jar包. 3.添加ehcache mybatis 适配器jar包(在mybatis官网) 4.添加spring mybatis 适配器jar ...