移动端rem字体大小适配

移动端rem适配

2020/07/20

html引入meta标签

<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

主文件rem.js

;(function (designWidth, maxWidth) {//设计稿宽度和自己设定最大宽度var doc = document,win = window;var docEl = doc.documentElement;var tid;var rootItem, rootStyle;function refreshRem() {var width = docEl.getBoundingClientRect().width;if (!maxWidth) {maxWidth = 540;};if (width > maxWidth) {width = maxWidth;}//与淘宝做法不同，直接采用简单的rem换算方法1rem=100pxvar rem = width * 100 / designWidth;//兼容UC开始rootStyle = "html{font-size:" + rem + 'px !important}';rootItem = document.getElementById('rootsize') || document.createElement("style");if (!document.getElementById('rootsize')) {document.getElementsByTagName("head")[0].appendChild(rootItem);rootItem.id = 'rootsize';}if (rootItem.styleSheet) {rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)} else {try {rootItem.innerHTML = rootStyle} catch (f) {rootItem.innerText = rootStyle}}//兼容UC结束docEl.style.fontSize = rem + "px";};refreshRem();win.addEventListener("resize", function () {clearTimeout(tid); //防止执行两次tid = setT imeout(refreshRem, 300);}, false);win.addEventListener("pageshow", function (e) {if (e.persisted) { // 浏览器后退的时候重新计算clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === "complete") {doc.body.style.fontSize = "16px";} else {doc.addEventListener("DOMContentLoaded", function (e) {doc.body.style.fontSize = "16px";}, false);}
})(375, 750);

最后在所需页面引入rem.js即可。

移动端rem字体大小适配相关推荐

pc端rem适配_浅谈pc端rem字体设置的问题
1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常 2.长,宽,LEFT,TOP,RIGHT,BOTTO ...
iOS字体大小适配的几种方法
摘要:在iOS开发中,有些公司对字体也有适配要求,为了让字体美观,所以在不同尺寸的屏幕上字体大小也要做到适配. 自己总结了几种方法供大家参考. 方法一:用宏定义适配字体大小(根据屏幕尺寸判断) //宏 ...
iOS字体大小适配机型的几种方法
在iOS开发中,有些公司对字体也有适配要求,为了让字体美观,所以在不同尺寸的屏幕上字体大小也要做到适配. 自己总结了几种方法供大家参考. 方法一:用宏定义适配字体大小(根据屏幕尺寸判断) //宏定义 ...
android 字体大小属于什么类型,聊聊 Android 中的字体大小适配
本篇文章已授权微信公众号 guolin_blog(郭霖)独家发布前言虽然去年写的一篇文章[一种非常好用的Android屏幕适配]就包含字体大小适配,但那篇文章讲的是根据不同屏幕尺寸来适配字体大小的 ...
Android 中的字体大小适配
Android系统中可以设置字体大小,对于一些设置了特大号字体的设备,往往会出现布局错乱的情况,对此,需要做相关的字体大小适配.根据聊聊 Android 中的字体大小适配这篇博客提供的方案,进行了一些 ...
关于rem移动端 html字体大小自适应设置的问题
rem是个单位,单位大小由它第一代祖先font-size的大小决定rem的大小. 了解字体大小的同时我们要知道像素是什么东西. 像素是屏幕的组成元素,我们看到屏幕上的内容都是由一个个小颗粒构成的,而这 ...
谷歌浏览器移动端部分字体大小与设定大小不同
问题描述:为了适配各种移动端设备,动态设置了viewport缩放,然后动态设置html的font-size大小,用rem布局.但是在谷歌浏览器中查看的时候出现了问题 1.这个没问题,font-size ...
native字体尺寸自适应 react_react-native中屏幕以及字体大小适配
import { Platform, Dimensions, PixelRatio } from 'react-native'; // iPhoneX const X_WIDTH = 375; con ...
手机端h5页面字体大小适配
为解决适安卓手机跟苹果手机字体大小和高度不一致的问题: 首先设置初始字体:由于浏览器默认(因为1em=16px,所以0.625em=10px): 设置初始字体大小为62.5%:然后根据不同的屏幕尺寸计 ...

移动端rem字体大小适配

移动端rem适配

移动端rem字体大小适配相关推荐

最新文章

热门文章