`

js+rem动态计算font-size的大小,适配各种设备

阅读更多
https://www.jianshu.com/p/afbf518cc891
https://blog.csdn.net/wangxuan02/article/details/78502251
这些人些,总是东抄一半,西抄一半。 下面是我整理的。

设计稿呢,就以750px。  不一样自己替换:
"use strict";

var changeHtmlSize = function() {
    var htmlTag = document.documentElement,
        clientWidth = htmlTag.clientWidth;
    htmlTag.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
var resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
window.addEventListener(resizeEvent, changeHtmlSize, false);
document.addEventListener('DOMContentLoaded', changeHtmlSize, false);


这里,在设计稿宽度=设备宽度时, 有1rem=100px,相应的,有 m px = m/100 rem。 即设计稿像素值,只需向左移动两个小数点即可得到得到需要的rem值。
分享到:
评论

相关推荐

    vue项目中使用lib-flexible解决移动端适配的问题解决

    lib-flexible会自动在html的head中添加一个meta name=”viewport”的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px,此

    JS动态计算移动端rem的解决方案

    在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: html { font-size : 20px; } @media only screen and (min-width: 401px){ html { ...

    详解如何使用rem或viewport进行移动端适配

    其可以称作为相对单位,也就是说我们可以通过视口的大小动态更新根元素字体大小(font-size)的值,从而动态更新rem所相对的值,使用使得移动端网页能够适配各种型号的手机。话不多说先上代码。 js代码(用于动态修改其...

    【JavaScript源代码】vue3.0 自适应不同分辨率电脑的操作.docx

     首先我们需要要安装一些依赖 npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小 npm i px2rem-loader -D//自动将px转换为rem npm i postcss-px2rem//将代码中px自动转化成对应的...

    详解vue.js移动端配置flexible.js及注意事项

    flexible.js适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕 1.安装lib-flexible.js npm install lib-flexible --save 1.在项目入口文件main...

    responsive.js

    responsive,js适配移动端的各个屏幕尺寸,基于addeventListener('resize',function(){},false)来监听屏幕尺寸的变化,改变rem(html)的font-size的大小,移动端开发非常简单,直接引入js即可,1rem=100px根据这么...

    flexible.js

    flexible.js手淘框架,是一个用来适配移动端的js...手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size,然后所有的距离大小都用rem来代替,这样就实现了不同大小的屏幕都适应相同的样式了。

    如何基于viewport vm适配移动端页面

    标签中viewport的值,给我更贴切的体会就是通过js脚本根据设备的dpr和设计图的宽度来计算出html的font-size值,然后就运用rem单位开发可以等比例缩放的H5页面。 但是!Flexible已经完成了他自身的历史使命,我们...

    mobileUtil:mobileUtil

    #####如果使用rem做适配,则任何弹性尺寸均使用 rem 作为单位 当前方案会把这3类视觉稿分成100份来看待。每一份被称为一个单位a。同时,1rem单位认定为10a。拿750的视觉稿举例: 1a = 7.5px 1rem = 7

    手淘flexible.js框架使用和源代码讲解小结

    手淘框架是一个用来适配移动端的js框架,下面我们来讲解一下如何使用手淘的这套框架。 基本概念 1、视窗viewport 可能写过移动端的朋友就知道viewport是什么意思。 如果你不知道的话,可以简单理解成:浏览器的可视...

Global site tag (gtag.js) - Google Analytics