移动端自适应js
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的更多相关文章
- 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)
flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...
- webstorm下的sass自动编译和移动端自适应实践
1.安装Ruby 2.安装sass 3.webstorm配置file watcher 4.移动端自适应 1.安装Ruby 安装Ruby,有多种方式,打开官网下载 因为,使用的是window选择Ruby ...
- rem 结合 scss 移动端自适应 初级入门demo
首先说明 本篇 内容 适合初级使用 rem 开发移动端 自适应 公式计算 推导过程, 高手绕路. 目标尺寸 = rem * 根字体大小 Px = rem * (html根字体px) 根字体大 ...
- 【转载】rem自适应布局-移动端自适应必备
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...
- 基于vue-cli配置移动端自适应
移动端自适应:手淘的 lib-flexible + rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装: 1 npm i lib-flexible --save 引 ...
- vue+vue-cli+淘宝lib-flexible做移动端自适应
总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价ma ...
- 处理移动端自适应布局的方法- calc()与vw
在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型 ...
- PC端自适应布局
截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫 内 ...
- 移动端报表JS开发示例--获取定位
上次分享了移动端报表JS开发的系统概念,后来我又回去摸索了一些案例.之前接触到的FineReport的APP客户端可以用来打卡签到,就好奇研究了以下,这次就来聊一聊报表移动端开发如何实现定位功能. 1 ...
随机推荐
- ubuntu18.04 阿里镜像源
备份:cp /etc/apt/sources.list /etc/apt/sources.list.bak 清空source.list:echo > /etc/apt/sources.list ...
- zero copy图解
原文链接:https://www.jianshu.com/p/8c6b056f73ce 1 传统的IO读写 传统的IO读写有两种方式:IO终端和DMA.他们各自的原理如下. 1.1 IO中断原理 ...
- qt qml Treeview使用记录--设置每个Item的图片logo,高度
这篇帮助很大: https://blog.csdn.net/qq_32116695/article/details/81298585, 代码如下: TreeView { id: viewTree an ...
- SFTP客户端与服务端
什么是 SFTP ? 在了解 SFTP 之前,我们先看看什么是 FTP . FTP( File Transfer Protocol )文件传输协议,是一种常用来在两终端系统之间传输文件的方法. SFT ...
- Anaconda中安装了Libtiff模块,但运行程序显示ModuleNotFoundError: No module named 'libtiff'
出现问题:Anaconda中已经用[conda install libtiff]命令安装了libtiff,并且利用命令[conda list]发现libtiff确实存在,但在pip中却不存在[pip ...
- 17 SUMIF函数、countif函数、averagif函数
情景 按买家求他们的消费各是多少. 可以考虑使用分类汇总来做,但这里我们使用函数sumif来做. SUMIF函数 格式:=SUMIF(条件列表,匹配条件,数据区) 该函数这样理解:按照匹配条件,从条件 ...
- HCIA SWITCHING&ROUTTING 笔记——第一章 TCP/IP基础知识(2)
视频地址:https://ilearningx.huawei.com/courses/course-v1:HuaweiX+EBGTC00000336+Self-paced/courseware/abb ...
- Linux和Windows系统目录结构区别
Windows目录结构图 Linux目录结构图 我们所有的操作尽量都要在/home/username目录下进行. 快捷进入家目录方式是cd ~.
- Scala 面向对象编程之对象
此对象非彼java bean对象 是scala object的对象 Object // object,相当于class的单个实例,通常在里面放一些静态的field或者method // 第一次调用ob ...
- 括号匹配问题 —— Deque双端队列解法
题目: 给定一个只包括 '(',')','{','}','[',']'?的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合.左括号必须以正确的顺序闭合.注意空字符串可 ...