移动端rem字体适配JS
// 『REM』手机屏幕适配,兼容更改过默认字体大小的安卓用户
function adapt(designWidth, rem2px) {
// designWidth:'设计图宽度' 1rem==rem2px+'px'
var d = window.document.createElement('div');
d.style.width = '1rem';
d.style.display = "none";
var head = window.document.getElementsByTagName('head')[0];
head.appendChild(d);
var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
d.remove();
document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
var st = document.createElement('style');
// 适应横屏、竖屏
var portrait = "@media screen and (min-width: " + window.innerWidth + "px) {html{font-size:" + ((window.innerWidth / (designWidth / rem2px) / defaultFontSize) * 100) + "%;}}";
var landscape = "@media screen and (min-width: " + window.innerHeight + "px) {html{font-size:" + ((window.innerHeight / (designWidth / rem2px) / defaultFontSize) * 100) + "%;}}"
st.innerHTML = portrait + landscape;
head.appendChild(st);
return defaultFontSize
};
var defaultFontSize = adapt(640, 100);
移动端rem字体适配JS的更多相关文章
- web移动端rem的适配
** 需求: 随着移动端设备的变化,内容也跟着变化.**先来说说rem单位,以rem为单位,其大小是根据根元素(html标签)的字体大小来判断的, 如 html的font-size:100p ...
- 移动端 rem字体的使用demo
<!doctype html> <html> <head> <meta charset="utf-8"> <title ...
- 移动端rem单位适配使用
1.适配方法 //缩放比例!function(e,t){function i(){o=1,e.devicePixelRatioValue=o,s=1/o;var t=a.createElement(& ...
- 移动端rem移动适配
https://www.cnblogs.com/jingwhale/p/5741567.html
- 移动端宽高适配JS
//定义全局变量 var winWidth = 0; /*窗口宽度*/ var winHeight = 0; /*窗口高度*/ //函数区 //实时获取浏览器窗口大小,当窗口大小变化开始相应操作 fu ...
- 基于REM的移动端响应式适配方案
视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 移动端rem适配&iOS兼容
移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...
- 移动端页面开发适配 rem布局原理
主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...
随机推荐
- 网络基础和 TCP、IP 协议
1.网络基本概念 1.1 什么是网络:一些网络设备按照一定的通讯规则(网络协议)进行通讯的系统. 1.2 VPN(虚拟私有网络)加密,相当于专线,从分支机构到总部. 1.3 资源共享的功能和特点: 数 ...
- STL初步学习(set)
2.set set可以看作一个集合,可以实现自动排序(升序)和去重 在许多题目中,都可以使用这个模板库,减少很多操作,例如P1923 第k小数,当然,这道题有很多奇奇怪怪的做法,分值都不同,之后会讲解 ...
- 集群搭建完成简要测试集群(性能)带宽与IOPS
集群搭建好之后网络,raid卡策略,磁盘都会影响集群的性能.为了避免因上述问题使得集群的性能受到影响,我们依次进行测试,最后得到基本的集群性能. 网络 首先是网络,ceph集群一大堆让人摸不着头脑的问 ...
- 错误记录——fail: Microsoft.AspNetCore.Server.Kestrel[13]
fail: Microsoft.AspNetCore.Server.Kestrel[13] Connection id "0HLPN4417RVEM", Request id &q ...
- 【XJOI】NOIP2020模拟训练题2 总结
得分情况: 估分: 30(T1)+100(T2)+0(T3)=130; 实际: 30(T1)+60(T2)+10(T3)=100; QAQ 是我高看自己了 T1 友好数对: 题意: 如果一个 ...
- 初步了解JVM
先看一眼JVM虚拟机运行时的内存模型: 1.方法区 Perm(永久代.非堆) 2.虚拟机栈 3.本地方法栈 (Native方法) 4.堆 5.程序计数器 1 首先的问题是:jvm如何知道那些对象需要回 ...
- npm和webpack
npm是前端开发中常用的一种工具,对于普通开发者来说,便于管理依赖. 往大了说,便于共享代码.写完代码,使用npm发布以后,然后别人用npm可以方便地共享到你的代码. npm的使用: mac环境下的安 ...
- 关于display的box和flex布局
关于二者的区别于联系,在知乎上看到有人这么回答的 flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本. box是2009年的语法,已经过时,是需要加上对应前缀的. 另外 ...
- Github和Azure DevOps的代码同步
[前言]Github和Azure DevOps都提供了Git代码库功能,那么有没有办法将两边的代码库进行同步呢,答案是肯定的.这里的操作我都是用Azure DevOps的Pipelines功能来完成的 ...
- Jenkins 自动化(CI/DI)部署
1. 背景介绍 在实际开发中,经常要一边开发一边测试,经常为了一个功能而不断更新版本,这些情况都会涉及到频繁的打包.部署:手动打包的涉及到项目上传.打包.发布等很多重复工作: 那么,有一种工具能够实现 ...