// 『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的更多相关文章

  1. web移动端rem的适配

    ** 需求: 随着移动端设备的变化,内容也跟着变化.**先来说说rem单位,以rem为单位,其大小是根据根元素(html标签)的字体大小来判断的,      如 html的font-size:100p ...

  2. 移动端 rem字体的使用demo

        <!doctype html> <html> <head> <meta charset="utf-8"> <title ...

  3. 移动端rem单位适配使用

    1.适配方法 //缩放比例!function(e,t){function i(){o=1,e.devicePixelRatioValue=o,s=1/o;var t=a.createElement(& ...

  4. 移动端rem移动适配

    https://www.cnblogs.com/jingwhale/p/5741567.html

  5. 移动端宽高适配JS

    //定义全局变量 var winWidth = 0; /*窗口宽度*/ var winHeight = 0; /*窗口高度*/ //函数区 //实时获取浏览器窗口大小,当窗口大小变化开始相应操作 fu ...

  6. 基于REM的移动端响应式适配方案

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...

  7. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  8. 移动端rem适配&iOS兼容

    移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...

  9. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

随机推荐

  1. LeetCode62. 不同路径

    由于机器人只可以向右和向下移动,所以我们要到第i行第j列,只可以由第i-1行第j列和第i行第j-1列移动一步得到,因此要到第i行第j列的方案数就是到第i-1行第j列的方案数和到第i行第j-1列的方案数 ...

  2. 理解与使用Javascript中的回调函数 -2

    在javascript中回调函数非常重要,它们几乎无处不在.像其他更加传统的编程语言都有回调函数概念,但是非常奇怪的是,完完整整谈论回调函数的在线教程比较少,倒是有一堆关于call()和apply() ...

  3. SpringBoot下Druid连接池的使用配置

    Druid是一个JDBC组件,druid 是阿里开源在 github 上面的数据库连接池,它包括三部分: * DruidDriver 代理Driver,能够提供基于Filter-Chain模式的插件体 ...

  4. 什么是JDK的SPI机制

    什么是SPI和API Application Programming Interface (API)? The API is the description of classes/interfaces ...

  5. Python3笔记012 - 3.3 条件表达式

    第3章 流程控制语句 3.3 条件表达式 在程序开发中,经常会根据表达式的结果,有条件地进行赋值. # 返回两个数中较大的数 a = 10 b = 6 if a>b: r = a else: r ...

  6. 使用MWeb进行博客发布测试

    MWeb 是专业的 Markdown 写作.记笔记.静态博客生成软件,目前已支持 Mac,iPad 和 iPhone.MWeb 有以下特色: 软件本身: 使用原生的 macOS 技术打造,追求与系统的 ...

  7. 1.Unity3d的新建场景和保存场景

    Unit3d开发游戏需要使用场景.一个游戏可以有多个场景,每个场景负责一个地图或者一片区域.游戏界面的显示,因此场景非常重要. 1.File->New Scene(Ctrl+N)新建场景 2.F ...

  8. day32 异常处理、网络编程

    目录 一.异常处理 1 什么是异常 2 为什么要处理异常 3 如何处理异常 3.1 语法错误 3.2 逻辑错误 3.3 两种处理逻辑异常的方式 3.3.1 可预知型错误 3.3.2 不可预知型错误 4 ...

  9. 攻防世界-Web-ics-05

    根据题目提示直接进入设备维护中心 点击云平台设备维护中心发现page=index LFI漏洞的黑盒判断方法: 单纯的从URL判断的话,URL中path.dir.file.pag.page.archiv ...

  10. 前端07 /jQuery初识

    前端07 /jQuery初识 目录 前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...