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. mysql 库、表、数据的增删改

    数据库定义 语法形式 (1)创建数据库 create database [if not exists ] 数据库名 [charset 字符集] [collate 字符排序规则]; if not exi ...

  2. 19暑假多校训练第一场-J-Fraction Comparision(大数运算)

    链接:https://ac.nowcoder.com/acm/contest/881/J来源:牛客网 题目描述 Bobo has two fractions xaxa and ybyb. He wan ...

  3. Spring之27:BeanDefinitionRegistry

    关于BeanDefinition见<Spring之Ⅰ:BeanDefinition> BeanDefinitionRegistry的类图: BeanDefinition 的注册接口,如 R ...

  4. sqlserve 数据库8G log文件也有10来g 按日期删除 方法

    数据库存了几年的数据没有维护过,数据庞大,日志文件也不小,如何清理不需要的数据呢 首先考虑的肯定是某个日期之前的数据清除掉 delete from 表名 where cast(字段名 as datet ...

  5. JAVA httpURLConnection curl

    // 文件路径 D:\ApacheServer\web_java\HelloWorld\src\com\test\TestHttpCurl.java package com.test; import ...

  6. Java线程同步synchronized的理解

    JVM中(留神:马上讲到的这两个存储区只在JVM内部与物理存储区无关)存在一个主内存(Main Memory),Java中所有的变量存储在主内存中,所有实例和实例的字段都在此区域,对于所有的线程是共享 ...

  7. Web服务器和Tomcat

    Web服务器常用: WebLogic:是BEA公司的推出的产品,现在已经被oracle收购,是目前应用最广泛的Web服务器,支持JavaEE规范,商用收费,开发者可以免费使用. WebSphere:I ...

  8. Django开发常用方法及面试题

    目录 1.对Django的认识? 2.Django .Flask.Tornado的对比 3.什么是wsgi,uwsgi,uWSGI? 4. django请求的生命周期? 5. 简述什么是FBV和CBV ...

  9. PAT(B) 1048 数字加密(Java)字符串

    题目链接:1048 数字加密 (20 point(s)) 题目描述 本题要求实现一种数字加密方法.首先固定一个加密用正整数 A,对任一正整数 B,将其每 1 位数字与 A 的对应位置上的数字进行以下运 ...

  10. PAT(B) 1057 数零壹(Java)字符串

    题目链接:1057 数零壹 (20 point(s)) 题目描述 给定一串长度不超过 10​5​​ 的字符串,本题要求你将其中所有英文字母的序号(字母 a-z 对应序号 1-26,不分大小写)相加,得 ...