移动端自适应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 ...
随机推荐
- LeetCode 242. 有效的字母异位词(Valid Anagram)
242. 有效的字母异位词 LeetCode242. Valid Anagram 题目描述 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的一个字母异位词. 示例 1: 输入: s ...
- 汉字转拼音js工具:
/ JavaScript Document var PinYin = { "a": "\u554a\u963f\u9515", "ai": ...
- python学习-40 生产者和消费者模型
import time def buy(name): # 消费者 print('%s上街去买蛋' %name) while True: eggs=yield print('%s买了%s' %(name ...
- SPI时序
1.串行外围接口 高速.全双工的同步通信总线 一主多从 一般速度几十MHZ,最高可以工作在上百MHZ 2.连接图 3.工作模式
- teamviewer远程控制程序免费版百度云下载
TeamViewer是一个远程共享桌面软件,使远程传输变得简单快速,远程访问安全可靠,能在任何防火墙后台进行远程控制.只需用户在两台计算机上同时运行这个软件就可以开始工作.使用时关闭杀毒软件,防止误报 ...
- C#中使用XML存储数据
创建XML文档 首先引用System.Xml命名空间 1.初始化一个实例 XmlDocument xd = new XmlDocument(); 2.创建XML头文件声明 XmlDeclaration ...
- ActiveMQ处理Message(String -javabean)
一.ActiveMq想要实现必备的六要素(基于jms) //链接工厂.用于创建链接 private ConnectionFactory factory; //用于访问Mq的链接,由链接工厂创建 pri ...
- 动态script标签同步加载 ps:无打包编译,静态实现静态资源入口动态配置,无编译打包静态资源添加版本号
/**功能:创建动态标签加载css ,js文件,重点是js文件,利用onloading加递归实现动态标签的同步加载用法:在html文件body底部script内部声明并调用下列函数,obj中写要加载的 ...
- Windows服务器修改远程桌面默认端口
一.打开注册表(通过开始菜单处输入命令输入 regedit回车即可打开注册表信息,或者Win键+R键打开输入框后输入regedit后回车) 二.打开注册表后,在左侧属性菜单进入下列路径“HKEY_LO ...
- Bipartite Checking CodeForces - 813F (线段树按时间分治)
大意: 动态添边, 询问是否是二分图. 算是个线段树按时间分治入门题, 并查集维护每个点到根的奇偶性即可. #include <iostream> #include <sstream ...