移动端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分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...
 
随机推荐
- JavaScript基础对象创建模式之私有属性和方法(024)
			
JavaScript没有特殊的语法来表示对象的私有属性和方法,默认的情况下,所有的属性和方法都是公有的.如下面用字面声明的对象: var myobj = { myprop: 1, getProp: f ...
 - SqueezeNet/SqueezeNext简述 | 轻量级网络
			
SqueezeNet系列是比较早期且经典的轻量级网络,SqueezeNet使用Fire模块进行参数压缩,而SqueezeNext则在此基础上加入分离卷积进行改进.虽然SqueezeNet系列不如Mob ...
 - QT Creator配置环境和安装
			
原文链接:https://blog.csdn.net/qq_33154343/java/article/details/78587699 补充下其中缺少的步骤:安装后缺少QT GUI Applicat ...
 - 数据库基础02-MYSQL的事务
			
Mysql的事务 1.基本概念 事务本质是一组SQL操作,事务中的语句要么全部执行成功,或者全部执行失败. 2.如何保证一个事务:四个特性(ACID) 原子性 (Automic) ...
 - Python爬虫教程(16行代码爬百度)
			
最近在学习python,不过有一个正则表达式一直搞不懂,自己直接使用最笨的方法写出了一个百度爬虫,只有短短16行代码.首先安装必背包: pip3 install bs4 pip3 install re ...
 - java NIO 实例之多人聊天
			
关键抽象 1.定义一个HashMap<String,SocketChannel>用户存储每个用户的管道. 2.服务端监听read事件,获取消息后轮询hashmap发送消息给用户模型内的所有 ...
 - dotNetCore阅读源码-CreateDefaultBuilder及ConfigureWebHostDefaults内部
			
版本:DotNetCore 3.1 CreateDefaultBuilder内部源码: public static IHostBuilder CreateDefaultBuilder(string[] ...
 - day17 装饰器(上)
			
目录 一.什么是装饰器 二.为什么要有装饰器 三.无参装饰器的使用 一.什么是装饰器 装饰:是对其他已有的事物添加额外具有一定意义的事物 器:是一种工具,在程序内可以定义成函数 合到一起就是:  装 ...
 - windows下的包管理器scoop
			
scoop(传送门) 安装 scoop是一个类似于linux下apt之类包管理器 安装scoop(Powershell 3+ and .NET Framework 4.5+) iex (new-ob ...
 - web CSS3 实现3D旋转木马
			
3D 旋转木马是CSS中常见的特效之一,旋转木马可以有多种方法实现,这里我使用纯CSS实现这种动画的效果. 简要介绍一下重点 transform: rotateY(60deg) translateZ( ...