`

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值。
分享到:
评论

相关推荐

    移动web开发---rem适配案例---优惠券.rar

    JavaScript法适配则更加灵活,可以通过监听窗口的resize事件动态调整font-size。例如,我们可以创建一个函数,该函数计算当前屏幕宽度,然后根据预设的比例关系设置html的font-size。这种方法的优点在于能够实时响应...

    js实现rem自动匹配计算font-size的示例

    关于前端开发中的布局单位rem,本篇文章提供了一个利用JavaScript实现自动匹配屏幕宽度并动态计算根元素font-size的示例。通过动态调整font-size的值,可以实现页面的自适应布局,适应不同屏幕尺寸的设备。以下是...

    px、rem转换工具 grunt-px2rem-master

    在前端开发中,尺寸单位的转换是至关重要的,特别是在响应式设计中,为了实现不同设备上的适配,经常需要将像素(px)单位转换为相对单位(如rem)。`grunt-px2rem`是一个Grunt插件,专门用于批量处理CSS文件,将...

    vue2.0+vuex+router+vant+rem移动适配+字体图标+axios基础模板-推荐在这个模板上进行开发

    Vue.js 是一款非常流行的前端JavaScript框架,用于构建用户界面。Vue 2.0是其第二个主要版本,提供了很多改进和优化,使得它更加成熟和稳定。在这个基础上,开发者经常结合其他技术来构建复杂的Web应用程序。以下是...

    移动Web开发之 rem适配布局----苏宁首页案例制作

    通常,我们会设置一个基础的根元素字体大小,然后根据设备宽度动态调整这个基础值,以实现屏幕适配。例如,我们可以使用媒体查询@media来设置不同断点时html元素的font-size。 接下来,我们看看如何应用rem来构建...

    Html5移动端网页端适配(js+rem).docx

    为了使标签云的字体大小能够根据其权重动态调整,我们可以使用简单的JavaScript代码来遍历所有`<a>`标签,并根据`data-weight`属性的值来计算相应的字体大小。 ```javascript document.querySelectorAll('a')....

    rem适配两种方案-实战篇

    在移动设备上,由于屏幕尺寸和分辨率的多样化,前端开发者...JavaScript动态计算方案能精确适配,但可能增加页面负担。选择哪种方案取决于项目需求和性能考虑。在实际开发中,通常会结合使用,以达到最佳的适配效果。

    rem适配js文件flexible.js和echartPxToRem.js

    1. `flexible.js`会检测当前设备的物理像素密度(dpr, Device Pixel Ratio)和屏幕宽度,然后根据这些信息计算出一个基础字体大小。 2. 基础字体大小会被设置到html元素上,这样所有使用rem单位的元素尺寸都会根据这...

    黑马面面 flexible+rem布局

    首先,通过JavaScript或者媒体查询(media queries)动态调整html元素的`font-size`,根据设备的屏幕宽度改变页面的基准字体大小。然后,利用rem单位设定界面元素的尺寸,确保它们按比例缩放。与此同时,使用Flexbox...

    移动端适配 rem & vw 计算工具

    它可能包含了动态计算视口宽度并更新元素尺寸的功能,尤其在用户旋转设备或者视口大小改变时,能够确保元素的尺寸始终保持适配。 6. **实际应用** 在实践中,开发者可能结合使用媒体查询(Media Queries)、...

    移动端rem开发自适应js写法

    使用JavaScript进行REM布局的动态调整,可以更好地适应不同设备的屏幕尺寸,确保视觉效果的一致性和用户体验。下面我们将深入探讨这个话题。 1. **REM基本概念** REM是相对于根元素的字体大小的单位。例如,如果...

    移动端使用rem布局那些事

    - **响应式设计**:使用rem可以使页面元素的尺寸根据屏幕宽度动态调整,适应各种设备。 - **简化计算**:相对于em单位,rem避免了父元素字体大小对子元素的影响,使得计算和维护更简单。 - **一致性**:整个页面可以...

    移动端适配rem文件js代码.zip

    "移动端适配rem文件js代码.zip"这个压缩包就是针对这一需求提供的一种解决方案,它包含了一个名为“rem.js”的JavaScript文件,用于动态调整页面元素的大小,以适应不同分辨率和屏幕尺寸的手机或平板电脑。...

    移动web开发,rem适配方案

    rem(root em)是一个相对于根元素(通常是html元素)字体大小的单位,通过设置html元素的font-size,可以改变所有使用rem单位的元素的大小。flexible.js库提供了一种动态设置html字体大小的方法,使得元素大小随着...

    Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

    使用`lib-flexible`时,会根据设备的屏幕宽度动态调整html元素的font-size,从而改变rem的基准值。而`px2rem-loader`和`postcss-plugin-px2rem`则是在编译阶段自动将CSS中的px转换为rem,简化开发者工作。 需要注意...

    关于rem的一切,这里全都有_能“等比例”适配所有屏幕尺寸教程.zip屏幕自适应

    这意味着,当我们在CSS中设置一个元素的宽度、高度或其他属性为rem时,它的值会基于`<html>`标签的`font-size`属性来计算。这与em单位有所不同,em单位是相对于父元素的字体大小,可能导致复杂的继承关系和计算。 *...

    仿手淘的h5适配方案采用rem适配页面设计稿分10等分

    总结来说,仿手淘的H5适配方案主要利用`rem`单位和flexible.js库,通过对页面设计稿进行10等分,实现了一种响应式的布局策略,确保在各种屏幕尺寸下都能保持良好的视觉效果。这种方案在实际项目中被广泛应用,尤其在...

    lib-flexible 移动端适配解决方案

    lib-flexible 的核心思想是通过动态改变 HTML 元素的字体大小(`html` 元素的 `font-size`),间接调整页面中所有使用相对单位(如em, rem)的元素大小。它会根据设备的物理像素宽度和设计稿的基准宽度来计算出适当...

    基于vue-cli配置lib-flexible + rem实现移动端自适应

    基于Vue-CLI配置Lib-Flexible + Rem实现移动端自适应 Vue-CLI是 Vue.js 的标准开发工具,提供了许多功能强大且灵活的配置选项。 Lib-Flexible是一个非常流行的移动端自适应解决方案,通过使用Rem单位来实现响应式...

    了解真实的REM手机屏幕适配

    为了实现这个目标,开发者通常会在CSS中设置`<html>`元素的字体大小,并根据设备的屏幕宽度动态调整这个值。这可以通过媒体查询(Media Queries)来完成,例如: ```css html { font-size: 16px; /* 默认值 */ } ...

Global site tag (gtag.js) - Google Analytics