// 『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. 第三方登陆---GITEE

    第三方登陆QQ通行入口 https://www.cnblogs.com/Yangbuyi/p/13194007.html 呼~~~~ 应身边的同学要集成第三方登陆 gitee.github.qq登陆. ...

  2. 乐观锁&CAS问题

    悲观者与乐观者的做事方式完全不一样,悲观者的人生观是一件事情我必须要百分之百完全控制才会去做,否则就认为这件事情一定会出问题:而乐观者的人生观则相反,凡事不管最终结果如何,他都会先尝试去做,大不了最后 ...

  3. Mybatis一对一映射resultMap子标签中顺序问题

    直接上图 鼠标点上红线出现如下提示 The content of element type "resultMap" must match  "(constructor?, ...

  4. Angular实现购物车全选

    直接上代码 <!DOCTYPE html> <html ng-app="myApp" > <head> <meta charset=&qu ...

  5. CF833 A The Meaningless Game

    题干 Slastyona and her loyal dog Pushok are playing a meaningless game that is indeed very interesting ...

  6. Anbox补充:添加arm支持(失败!)

    写在开头: 本人是一边操作一边写博文的,折腾一下午写到最后失败了不舍得删,还是发上来记录一下我的操作,希望能有高人指点或者给同学们一点启发.以下的内容仅做观看即可,若无必要就不必尝试了. 之前写了一篇 ...

  7. class文件的基本结构及proxy源码分析二

    前文地址:https://www.cnblogs.com/tera/p/13267630.html 本系列文章主要是博主在学习spring aop的过程中了解到其使用了java动态代理,本着究根问底的 ...

  8. 微信小程序开发中遇到的几个小问题

    本地图片不显示,开发工具运行是没问题的,但真机调试却显示不了 item.img = '/goods/img/图片.png' <image src="{{item.img}}" ...

  9. SQL列转行,行转列实现

    在工作中,大家可能会遇到一些SQL列转行.行转列的问题,恰好,我也遇到了,就在此记录一下.此处所用的是SQLServer2008R2. 行转列,列转行,都要预先知道要要处理多少数据,在此我就以三种方案 ...

  10. 最大熵原理(The Maximum Entropy Principle)

    https://wanghuaishi.wordpress.com/2017/02/21/%E5%9B%BE%E8%A7%A3%E6%9C%80%E5%A4%A7%E7%86%B5%E5%8E%9F% ...