首页
学习
活动
专区
工具
TVP
发布

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

前言   移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配。那么来讲讲rem在其中起的作用和如何动态设置rem的值。...1、什么是rem   rem是相对于根元素(html标签)的字体大小的单位。 2、rem实现适配的原理   核心思想:百分比布局可实现响应式布局,而rem相当于百分比布局。   ...实现手段:动态获取当前视口宽度width,除以一个固定的数n,得到rem的值。表达式为rem = width / n。   通过此方法,rem大小始终为width的n等分。...device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 5、使用体验:   我在项目中没有使用flexible.js...等此类动态计算rem的插件。

3.7K11
您找到你想要的搜索结果了吗?
是的
没有找到

JS:用rem来做响应式开发

(你还可以设置更多节点) 用媒体查询的话要保证每个像素下都有对应的适配效果显然你要设置更小的宽度范围; 3.还有就是css3的单位remrem就是将根节点html的font-size的值作为整个页面的基准尺寸...,例如那么1rem=10px;如何做到适配呢?...那就要用到js在页面加载时获取window的宽度(浏览器窗口的宽度)$(window).width();在开发手机页面的时候,一般我们设置最大宽度为640px,因为640px可以保证在至今最宽的手机上显示时网页两端刚好贴合屏幕...; //我这里设置html的font-size:20px;最大 宽为640px,即相当于640/20=32rem;一行有3个div, 所以每个div宽10.6rem 你也可以像论坛里面讲的那样设置...solid #000; box-sizing: border-box; } js window.onresize = window.onload

6.1K10

rem+css预处理+媒体查询与rem+flexible.js做网页适配

适配方案 一、 css预处理语言 媒体查询 rem 二、 flexible.js rem 动态设置html标签font-size的大小 案例 如果设计稿是750px 2.假如我们把整个屏幕划分为15等份...(这里的标准是指以哪个尺寸的设计稿算出来的font-size值) rem配合 flexible.js 使用第一种方式有点麻烦 如下代码 很多媒体查询 /* 设置常见屏幕尺寸,修改html文字大小*/ /...10rem / @baseFont } } 每次设计到高宽都要除下font-size 解决办法是通过flexible.js github 它是手机淘宝团队出的简洁高效移动端适配库 我们不需要在写不同屏幕的媒体查询...,因为js做了相关处理 它的原理是把当前设备划分为10等份,但是在不同设备下比例一致 我们要做的就是确定好我们当前设备的html文字大小就可以了 比如当前设计稿750px,那么我们只需要把html文字大小设置为...75px(750px/10)就可以 里面页面元素rem值:页面元素的px值 / 75 剩下的交给flexible.js 如下 html{ font-size: 20px!

1.9K20

可爱的rem

来进行适配啊:可以说是目前最强的移动端适配方案... rem是什么 rem和em单位一样,都是一个相对单位,不同的是em是相对于父元素的font-size进行计算,rem是相对于根元素html的font-size...进行计算的,这样一来rem就完美的绕开了复杂的层级关系,实现了类似em单位的功能。...默认情况下,浏览器给的字体大小是16px,按照转化关系16px = 1rem。 咦,都是固定了根元素是默认16px了,如何设备不同的移动设备呢?...见下: rem自适应处理方案 使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果。...(function(){ var devicePixelRatio = window.devicePixelRatio || 1; })(); 复制代码 嗯,在移动端上面适配,rem和viewport

87620

不要再用js设置rem了,现代css自适应方案来了

在做移动端适配的时候,很多人第一反应就是使用 rem ,通过动态设置 html 上的 font-size 来进行页面的自适应,基本原理就是 rem 表示的是 root em ,页面中所有的值都是基于...em 的缩写,rem 不是相对于当前元素,而是相对于根元素,所以,不论什么位置,使用 rem 单位都是相对于根元素的 font-size 实际使用的选择性 既然 rem 这么好用,并且不存在 em 那么复杂的计算逻辑...,是不是在项目中我们都用 rem 就好了呢?...等等,这样统一的字号标准,让页面不论是缩放还是适配都游刃有余,所以当你拿捏不准使用什么方式来设置一些元素的时候,就按照上述的来,一般是没有什么问题的 使用 js 设置根元素 rem 自从有了 rem...这个便捷的相对单位,我们就有了一些奇怪的操作,比如用 js 设置根元素大小这个操作,就是将网页的根元素字号根据屏幕的大小动态设置为一个固定值,然后在页面中根据 ui 给出的图,换算成 rem 值,进行各种适配

4K41

rem 布局原理

rem:相对于根元素(即 html 元素)font-size 计算值的倍数。 通俗的说,1rem = html 的 font-size 值 这段代码。...html{font-size:100px;} a{font-size:.5rem;} 如何使用 rem 进行布局?...1.标签的 rem 单位的值怎么计算 通过使用 rem + js 改变 html 标签的 font-size(整体缩放)实现兼容性更高的页面下面来举个例子, 当我们拿到的设计图是 750px 的时候,...当屏幕 750px 的时候,html 的 font-size 值是 100px;窗口大小变化的时候,可以通过js 获取到窗口大小。...这时候获取到一个比例 750:100=获取到的屏幕大小:html 标签的 px 单位的值以下 js 代码,用于实现根据获取到的屏幕大小,动态修改 html 标签的 px 单位的值 <script

1.5K30

rem适配布局

1、rem基础 rem单位 rem (root em)是一个相对单位 ,类似于em , em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。...为单位的值; 4.2 rem适配方案技术使用(市场主流) 技术方案1 rem 媒体查询 less 技术方案2 (推荐) flexible.js rem rem实际开发适配方案...rem值 = 页面元素值( px) / html font-size字体大小 rem适配方案2 简洁高效的rem适配方案flexible.js 手机淘宝团队出的简洁高效移动端适配库 我们再也不需要在写不同屏幕的媒体查询...,因为里面js做了处理 它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。...值/ 75 剩余的,让flexible.js来去算 github地址: https://github.com/amfe/lib-flexible 总结: 因为flexible是默认将当前屏幕分为10等分

1.8K30

rem与em详解

rem与em详解 em 和 rem都是灵活、 可扩展的单位,由浏览器转换为像素值,具体取决于您的设计中的字体大小设置。...Em 和 rem 单位提供的这种灵活性和工作方式都很相似,所以最大的问题是,我们何时应使用 em 值,何时应使用 rem 值呢?...rem 单位如何转换为像素值 当使用 rem 单位,他们转化为像素大小取决于页根元素的字体大小,即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。...为什么使用 rem 单位: Rem 单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不是继承。...媒体查询中使用 rem 单位 不要在多列布局中使用 em 或 rem -改用 %。 不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。

3.8K30

CSS单位em和rem

一般开发用px比较多,现在开发移动端rem用的也比较多,在这边就不讨论vh和vw与rem的比较。今天只说说em和rem具体的显示单位。...: 1rem">这是em单位 当我们设置HTML字体大小为20px的时候,相当于1rem=20px,此时div的宽高就是100px,字体大小就是20px,当我们改变HTML字体大小的时候...可以自己写一下这样的代码,很容易就知道rem是怎么换算的。...根据这个特性,我们就可以动态的设置HTML的字体大小,来自适应不同手机分辨率,当然,最好我们设置成能整十整百的计算,好比1rem=100px,而不是1rem=75px,这样方便写样式的时候计算。...PC端最好不要使用rem,因为像Chrome最小字体单位是12px,可是默认大小是16px,不同浏览器会有不同的默认单位或者是最小字体单位,所以PC最好不要使用rem单位。

1K20

响应式布局rem布局

我们做的h5页面只能在移动端访问(rem不兼容低级版本浏览器) 第一步:从UI设计师拿到设计稿(psd) 640*1136 第二部:在样式中给HTML一个fontSize值,我们一般都给一个比较好算的值...在这里我们之所有用100px,主要是浏览器最小的字体大小都是12px,用10px比例会存在偏差 html{ font-size: 100px;/*1rem=100px*/...写样式 完全按照设计尺寸来写样式,不管任何事情,设计稿给你的宽度,高度字体大小、margin、padding的值是多少,我们就写多少 但是我们在写样式的时候,需要把得到的像素值除以100,计算出对应的rem...值,我们设定的也都是rem的值 (值得注意点的是外层盒子的宽度我们一般还是不写固定值,沿用流式布局的思想) 第四步:根据当前屏幕的宽度和设计稿的宽度来计算我们的HTML的fontSize的值 设计稿...fontSize=50 手机:375 fontSize=58.59375 // 根据当前屏幕的宽度和设计稿宽度的比例,动态计算一下宽度下fontSize值应该是多少,如果fontSize值改变了,之前的rem

1.9K10
领券