理解rem实现响应式布局原理及js动态计算rem「建议收藏」

理解rem实现响应式布局原理及js动态计算rem

大家好,又见面了,我是全栈君。

前言

  移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配。那么来讲讲rem在其中起的作用和如何动态设置rem的值。

1、什么是rem

  rem是相对于根元素(html标签)的字体大小的单位。

2、rem实现适配的原理

  核心思想:百分比布局可实现响应式布局,而rem相当于百分比布局。

  实现手段:动态获取当前视口宽度width,除以一个固定的数n,得到rem的值。表达式为rem = width / n。

  通过此方法,rem大小始终为width的n等分。

3、如何动态计算rem

  核心代码块:

        // 动态为根元素设置字体大小
function init () {
      // 获取屏幕宽度
var width = document.documentElement.clientWidth
      // 设置根元素字体大小。此时为宽的10等分
document.documentElement.style.fontSize = width / 10 + 'px'
}

     //
     首次加载应用,设置一次
init()
// 监听手机旋转的事件的时机,重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化,重新设置
window.addEventListener('resize', init)

  理解:上面代码实现了,无论设备可视窗口如何变化,始终设置rem为width的1/10.即实现了百分比布局
4、tip:
  1、以上代码需在dom之前写入(可放在head里面第一个script标签)

  2、移动端加上meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
5、使用体验:
  我在项目中没有使用flexible.js等此类动态计算rem的插件。另外说明一点,此方法实现的功能也相对简单,只实现了最核心的动态修改rem的值。

 

                

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107904.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • C# 中使用正则表达式 Regex.Matches方法的几个应用[转]

    C# 中使用正则表达式 Regex.Matches方法的几个应用[转]

    2021年11月17日
  • Windows Server 2016 检查更新时,错误代码8024401C 的解决方案「建议收藏」

    Windows Server 2016 检查更新时,错误代码8024401C 的解决方案「建议收藏」这个问题的核心是连接不到更新服务器,有多种解决方案(如给SoftwareDistribution改名、疑难解答等),还有一部分情况是因为IPV6导致,关闭IPV6即可解决。如果其他办法都不好用可以试试这个~WindowsServer关闭ipv6的办法:开始->运行->输入Regedit进入注册表编辑器定位到:[HKEY_…

  • iocomp-Crack|New Version最新【2021】「建议收藏」

    iocomp-Crack|New Version最新【2021】「建议收藏」使用IocompComponents5.0以上能够助程序员开发出逼真的工控仪表和工控图表,让程序开发不再消耗时间和精力,有了这个控件不仅能节约开发时间,而且还降低了项目风险,最重要的是第三方控件写的程序更专业,工控图表图像更精细。他们用于生成具有专家级外观的仪器控件,并能紧密整合到Microsoft’s.NETFramework之中。您无需辛苦的在属性窗口中寻找该属性,其自定义的属性编辑器提供了简单快速的属性配置方法。Ultra控件包提供了70种专家级控件以及绘图控件包组件非常强大的

  • Jenkins安装_jenkins sonar

    Jenkins安装_jenkins sonar前言jenkins的环境搭建方法有很多,本篇使用docker快速搭建一个jenkins环境。环境准备:mac/Linuxdockerdocker拉去jenkins镜像先下载jenkins镜

  • java dom4j读取xml_Java DOM4J读取XML[通俗易懂]

    java dom4j读取xml_Java DOM4J读取XML[通俗易懂]DOM4J是dom4j.org出品的一个开源XML解析包。Dom4j是一个易用的、开源的库,用于XML,XPath和XSLT。它应用于Java平台,採用了Java集合框架并全然支持DOM,SAX和JAXP。Hibernate也是用它来读写配置文件的。一、DOM4j的下载dom4j-1.6.1.jar下载:http://sourceforge.net/directory/os:windows/fr…

  • em算法在高斯混合模型中的应用_高斯分布概率计算公式

    em算法在高斯混合模型中的应用_高斯分布概率计算公式一个例子高斯混合模型(GaussianMixedModel)指的是多个高斯分布函数的线性组合,理论上GMM可以拟合出任意类型的分布,通常用于解决同一集合下的数据包含多个不同的分布的情况(或者是同一类分布但参数不一样,或者是不同类型的分布,比如正态分布和伯努利分布)。如图1,图中的点在我们看来明显分成两个聚类。这两个聚类中的点分别通过两个不同的正态分布随机生成而来。但是如果没有GMM,那么只能用一

    2022年10月21日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号