window.addEventListener('resize', setHtmlFontSize)
setHtmlFontSize(); function setHtmlFontSize() {
var windowWidth = document.documentElement.offsetWidth;
if (windowWidth > 640) {
windowWidth = 640;
} else if (windowWidth < 320) {
windowWidth = 320;
}
var StandardWidth = 375;
var StandardHtmlFontSize = 16;
var htmlFontSize = windowWidth / StandardWidth * StandardHtmlFontSize;
document.querySelector('html').style.fontSize = htmlFontSize + 'px';
}

移动端自适应js的更多相关文章

  1. 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)

    flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...

  2. webstorm下的sass自动编译和移动端自适应实践

    1.安装Ruby 2.安装sass 3.webstorm配置file watcher 4.移动端自适应 1.安装Ruby 安装Ruby,有多种方式,打开官网下载 因为,使用的是window选择Ruby ...

  3. rem 结合 scss 移动端自适应 初级入门demo

    首先说明 本篇 内容 适合初级使用 rem 开发移动端 自适应 公式计算 推导过程, 高手绕路. 目标尺寸 = rem  *  根字体大小 Px   =  rem * (html根字体px) 根字体大 ...

  4. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  5. 基于vue-cli配置移动端自适应

    移动端自适应:手淘的 lib-flexible + rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装: 1 npm i lib-flexible --save 引 ...

  6. vue+vue-cli+淘宝lib-flexible做移动端自适应

    总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价ma ...

  7. 处理移动端自适应布局的方法- calc()与vw

    在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型 ...

  8. PC端自适应布局

    截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫 内 ...

  9. 移动端报表JS开发示例--获取定位

    上次分享了移动端报表JS开发的系统概念,后来我又回去摸索了一些案例.之前接触到的FineReport的APP客户端可以用来打卡签到,就好奇研究了以下,这次就来聊一聊报表移动端开发如何实现定位功能. 1 ...

随机推荐

  1. Stream知识点总结及源码阅读

    上次[http://www.cnblogs.com/webor2006/p/7795596.html]对Stream进行了简单的学习,这次继续学习Stream,还是结合java8 in action这 ...

  2. LeetCode 145. 二叉树的后序遍历(Binary Tree Postorder Traversal)

    145. 二叉树的后序遍历 145. Binary Tree Postorder Traversal 题目描述 给定一个二叉树,返回它的 后序 遍历. LeetCode145. Binary Tree ...

  3. Duration和Period的区别--通俗易懂

    在jdk1.8以后,对表示日期时间的类型进行了重新分类,这里出现了2个新的类,Duraction 和Period Duraction表示:时间的区间,用来度量秒和纳秒之间的时间值 Period表示:一 ...

  4. vector 使用pair对

    pair是一种序偶结构<x,y> 如果我们希望使用pair但又不需要map对其排序,可以在vector中使用pair对 插入pair对使用make_pair<typename,typ ...

  5. zblog安装环境介绍?zblog安装需要什么环境

    最近在群里看到很的多人有在问:“安装zblog需要什么环境?”,其实这个问题在zblog官网的程序下载页面有说明,但是不太详细,那么本文的目的就是来给大家介绍下zblog安装环境详细说明. zblog ...

  6. golang之 iota 常量生成器

    常量声明可以使用iota常量生成器初始化,它用于生成一组以相似规则初始化的常量,但是不用每行都写一遍初始化表达式.在一个const声明语句中,在第一个声明的常量所在的行,iota将会被置为0,然后在每 ...

  7. 机器学习-EM算法-pLSA模型笔记

    pLSA模型--基于概率统计的pLSA模型(probabilistic Latent Semantic Analysis,概率隐语义分析),增加了主题模型,形成简单的贝叶斯网络,可以使用EM算法学习模 ...

  8. 常用NLog配置

    <?xml version="1.0" encoding="utf-8" ?> <configuration> <configSe ...

  9. Linux入职基础-1.2_U盘安装RedHat5具体步骤

    从U盘安装RedHat5具体步骤 从U盘安装RedHat Linux的具体步骤: 准备工作: RHEL_5.6_i386_DVD.ISO文件 具体步骤: 1.解压并用ultraiso软件打开rhel- ...

  10. ESlint 格式化代码 备忘

    vscode 代码格式化配置 vscode 菜单 文件->首选项->设置 --->进入扩展查找到ESlint,点击任一选项中的[在setting.json中配置],复制以下代码 { ...