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. C/C++ 多线程(程序猿面试重点)CodeBlocks-CB的pthreads使用

    C++ 多线程 本文主要讲一下C++多线程 线程好处 ·使用线程可以把占据长时间的程序中的任务放到后台去处理 ·程序的运行速度可能加快 可以释放一些珍贵的资源如内存占用等等. 但是多线程是为了同步完成 ...

  2. 二、部署DHCP

    *本文转自https://blog.51cto.com/lumay0526/2046957 简述 DHCP是Dynamic Host Configuration Protocol的缩写,中文称动态主机 ...

  3. 解决windows下tomcat端口被占用

    在平时开发中,电脑太卡或者项目比较大,有时候没有完全停止eclipse下的tomcat再次启动tomcat会出现端口占用情况,主要报如下错误: 具体解决方案: 打开windows下的命令窗口(快捷键: ...

  4. 20191031:Python取反运算详解

    20191031:Python取反运算详解 取反运算:~3 == 4 1.对于数字 3 =======>转换为二进制表示为011 2.对011取反为100 3.为什么表示-4 a.计算机用补码表 ...

  5. go 数据渲染到html页面 02

    渲染到浏览器页面 //把数据渲染到浏览器 package main import ( "fmt" "text/template" "net/http& ...

  6. Codeforces Round #563 Div. 2

    A:显然排序即可. #include<bits/stdc++.h> using namespace std; #define ll long long #define inf 100000 ...

  7. Aop 打印参数日志时,出现参数序列化异常。It is illegal to call this method if the current request is not in asynchron

    错误信息: nested exception is java.lang.IllegalStateException: It is illegal to call this method if the ...

  8. java 读取文件流

    搬运自速学堂:https://www.sxt.cn/Java_jQuery_in_action/ten-iqtechnology.html JAVA中IO流体系: 四大IO抽象类 ·InputStre ...

  9. React 脚手架支持Typescript和Sass

    首先,创建React工程目录,以及选择Typescript版本 进入在my-app目录,安装node-sass 然后再安装webpack的sass-loader  接下来进入node_modules ...

  10. 【转载】Sqlserver使用SUBSTRING函数截取字符串

    在SQL语句查询过程中,Sqlserver支持使用LEFT().RIGHT().SUBSTRING()等几个函数对字符串进行截取操作,SubString函数相对于其他两个函数来说更灵活,使用场景更多, ...