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. 在linux上cuda9.0 cudnn7.* 安装python3.6 tensorflow 1.5.1

    链接:https://www.jianshu.com/p/bcf37d0e4e9b 为了入门机器学习的小伙伴能安装好工具,特制作此教程 按照 Anaconda 下载网站上的说明下载并安装 Anacon ...

  2. [DevExpress] - 在 DataGrid 中添加多选复选框的方法

    设置方法 在 GridView 中设置 OptionSelection 属性如下: 效果 参考资料 https://stackoverflow.com/a/9078848http://blog.csd ...

  3. Quartz.Net—DateBuilder

    定时框架中最重要的就是时间,我们也可以直接使用Cron这种事件格式.  使用其他的时间格式,就可以用DateBuilder快速的创建出需要的时间. 因为quartz是一个定时框架,所以对于操控时间  ...

  4. Asp.Net Core中创建多DbContext并迁移到数据库

    在我们的项目中我们有时候需要在我们的项目中创建DbContext,而且这些DbContext之间有明显的界限,比如系统中两个DbContext一个是和整个数据库的权限相关的内容而另外一个DbConte ...

  5. phpstrom xdebug phpstudy调试,跳不到设置断点的原因,以及配置方法

    设置的是127 的地址,而用localhost 方式请求,所以无法跳到断点 环境 phpstudy 2018 php 7.2.10 xdebug版本 (因为要与php版本要对应,注意别选错了,我的用的 ...

  6. 剑指offer65:矩阵中的路径(二维数组,二分查找)

    1 题目描述 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下移动一个格子.如果一条路径经过了矩 ...

  7. 【HC89S003F4开发板】 6crc校验

    HC89S003F4开发板crc校验 前言 第一次用有带crc的mcu 使用资料自带的demo @实现效果 通过PC向MCU发送5个8位数据,MCU返回CRC校验值 void main() { /** ...

  8. websocket 协议简述

    WebSocket 是一种网络通信协议,RFC 6455 定义了它的通信标准,属于服务器推送技术的一种 由于 HTTP 无状态.无连接.单向通信的特性,导致 HTTP 协议无法实现服务器主动向客户端发 ...

  9. Feign 客户端调用错误

    1.@RequestBody 必须要写在实现接口中 2.Feign 客户端调用的时候如果有参数的话,默认是发送post请求 3.服务接口中的请求参数必须要加上@RequestParam("r ...

  10. yum更换源配置

    今天安装mysql5.7的时候出现了点问题,最后更换yum源解决了,把这个记录一下 yum源配置(阿里云源) 1) 安装wget yum install -y wget 2) 备份/etc/yum.r ...