H5的rem适配方案

在公共的js中加上一下代码，动态计算根节点的font-size，以便rem计算倍数。

(function(doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//750 为设计稿宽度  适配remrecalc = function() {var clientWidth = docEl.clientWidth;if (!clientWidth) return;clientWidth = clientWidth <= 1080 ? clientWidth : 1080;docEl.style.fontSize = (clientWidth / 750) * 100 + 'px';};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

1rem = body 的 px 倍数，在 css 中就以设计稿/100 的 rem 来写。

按照爱疯 6 的 375 宽度来计算，根节点的 font-size 设置为 50px。

另外，在公共的 css 中设置 body，确保在 PC 上查看页面也不会变形：

min-width: 320px;
max-width: 640px;

H5的rem适配方案相关推荐

H5移动端适配方案rem/vw
前言在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）
移动web开发之rem布局一.rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素 ...
vue中使用rem适配方案
一.移动端适配常见方案: (1)通过媒体查询的方式即CSS3的meida queries (2)以天猫首页为代表的 flex 弹性布局 (3)以淘宝首页为代表的 rem+viewpor ...
vue中使用第三方UI库的移动端rem适配方案
需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...
element 手机适配_手机端rem适配方案_蓝戒的博客
方案一: 1.viewport设置: 2.html根元素font-size设置(注:设计稿640px): var deviceWidth = document.documentElement.clie ...
sass px转rem适配方案
// rem $browser-default-font-size: 16px ;html {font-size: $browser-default-font-size; }@media screen ...
使用Flexible.js实现手机端网页内容适配(rem适配法)
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- ...
Vue移动端项目——Vant 移动端 REM 适配
Vant官方文档 Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 ...

H5的rem适配方案

H5的rem适配方案相关推荐

最新文章

热门文章