// 『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. Zuul请求超时

    最近在弄springcloud的时候发现在发送短信的时候zuul总是报错,错误信息如下 com.netflix.zuul.exception.ZuulException: at org.springf ...

  2. 洛谷 P1991 【无线通讯网】

    这道题找到关键点那就是模板题了,代码好写哒~ 因为有S个电话,两个电话就可以连通两个块,那是不是我们就可以看做一条无消耗的边,提前连了起来.根据Kruskal的思想,我们每次加入最小的边,直到联通,由 ...

  3. 七月份开发语言排行榜,Java依然霸榜

  4. 如何Simplest搭建个人博客

    前期 例如wordpress.hexo.hugo-- 准备 安装Node.js,安装Git,进入Hexo网站.进入Github网站进注册和登录. 建议买个阿里云服务器(学生最近好像是免费的) 开始搭建 ...

  5. 如何排查CPU占用太高

    线上项目运行时,出现问题不像在本地那么容易排查,经常需要借助日志.或者一些工具来找出问题.cpu被占满我们经常会遇到.比如我们有这样一段代码: public Class Demo1_16 { publ ...

  6. Window - 安装 Jenkins

    安装方式 war 包放 Tomcat 下 直接安装 jenkins.msi 环境准备 安装 jdk.tomcat,参考:https://www.cnblogs.com/poloyy/p/1326781 ...

  7. day70 django中间件

    目录 一.django的七个中间件 二.如何自定义中间件 1 自定义中间件的创建方式 2 django提供自定制中间件的五个方法 2.1 必须掌握两个方法 2.2 了解方法 三.csrf跨站请求伪造校 ...

  8. Django的Cookie Session和自定义分页

    cookie Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不 ...

  9. MYSQL 之 JDBC(十): JDBC的元数据

    可以从Connection对象中获得有关数据库管理系统的各种信息 获取这些信息的方法都是在DatabaseMetaData类中. DatabaseMetaData:描述数据库的元数据对象 Result ...

  10. 数据可视化之powerBI入门(十三)CALCULATE函数的最佳搭档:FILTER

    https://zhuanlan.zhihu.com/p/64383000 介绍过CALCULATE函数之后,有必要再介绍它的最佳搭档:FILTER函数. CALCULATE函数的第二个及之后的参数是 ...