什么是rem 说到rem自然就会想到em，我们知道em是相对于父元素的字体大小的单位，那么rem则是相对于根元素也就是元素的字体大小的单位。 2.如何用rem解决移动端适配 ?...通过这张图我们就可以观察到，div的宽度和高度是根据根元素（）来决定的，根元素的字体大小为100px，然后给div的宽度和高度设置为2rem、1rem，最后生成的div的宽度为200px、高度为100px...3.通过JavaScript动态设置rem 不同浏览器根标签的默认字体大小不一样，所以需要JavaScript动态设置rem。...(function(doc, win) { var docEle = doc.documentElement, //获取html元素 event = "onorientationchange...width = docEle.clientWidth; width && (docEle.style.fontSize = 10 * (width / 375) + "px"); //设置
rem单位 效果：屏幕宽度不同，网页元素尺寸不同（等比缩放） 与px单位或百分比布局对比： px单位是绝对单位 百分比布局特点宽度自适应，高度固定 rem单位是相对单位 rem单位是相对于HTML标签的字号计算结果...作用：可以使用媒体查询, 根据不同的视口宽度, 设置不同的根字号。...3.得出rem单位的尺寸，并书写代码 rem单位的尺寸=px单位数值/基准根字号 *例：计算68px是多个rem？...flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果。...flexible.js是手淘开发出的一个用来适配移动端的js框架，核心原理就是根据不同的视口宽度给网页中html根节点设置不同的 font-size。
rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下 emem作为font-size的单位时，其代表父元素的字体大小...，em作为其他属性单位时，代表自身字体大小——MDN em做弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那么其后代元素都得重新计算 rem作用于非根元素时，相对于根元素字体大小...；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN rem取值分为两种情况，设置在根元素时和非根元素时，举个例子 /* 作用于根元素，相对于原始大小（16px），所以html的font-size...为32px*/html {font-size: 2rem}/* 作用于非根元素，相对于根元素字体大小，所以为64px */p {font-size: 2rem} 三、Rem布局原理 如果子元素设置rem...可以通过js来设置，一般需要在页面dom ready、resize和屏幕旋转中设置 document.documentElement.style.fontSize = document.documentElement.clientWidth
rem 在 html 文档中，根节点是所有其它元素的祖先，:root 表示根节点的伪类选择器，可以用来选中 html ，html 类型选择器和 :root 伪类选择器优先级是有区别的 rem 是 root...em 的缩写，rem 不是相对于当前元素，而是相对于根元素，所以，不论什么位置，使用 rem 单位都是相对于根元素的 font-size 实际使用的选择性 既然 rem 这么好用，并且不存在 em 那么复杂的计算逻辑...等等，这样统一的字号标准，让页面不论是缩放还是适配都游刃有余，所以当你拿捏不准使用什么方式来设置一些元素的时候，就按照上述的来，一般是没有什么问题的 使用 js 设置根元素 rem 自从有了 rem...这个便捷的相对单位，我们就有了一些奇怪的操作，比如用 js 设置根元素大小这个操作，就是将网页的根元素字号根据屏幕的大小动态设置为一个固定值，然后在页面中根据 ui 给出的图，换算成 rem 值，进行各种适配...，10px 展示有问题，导致我们需要给所有的元素上设置 至少为 1.2rem 才能保证显示正常 当屏幕过大的时候，比如移动端转到 pc 端，页面的根元素 font-size 又会变的很大，感官上根本不能用
:2em;则自身元素用px表示就是24px（相对父元素字体大小）; 但是自身元素设置：width:2rem,那么自身元素用px表示就是48px（相对自身字体大小）； 2.2、rem rem作用于非根元素时...，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN 比如根元素（html）设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px...； 如果根元素设置成font-size=1rem;则根元素换成px就是相对于初始字体大小，一般是12px； 2.3、vm/vh vw ：视口宽度的 1/100；vh ：视口高度的 1/100 —— MDN...字体并不合适使用rem, 字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；由于设置了根元素字体的大小，会影响所有没有设置字体大小的元素，因为字体大小是会继承的，难道要每个元素都显示设置字体大小...五、rem布局方案 从上可以看出最好的弹性布局方案就是rem+js的方案，《Flexible实现手淘H5页面的终端适配》就是采用rem+js实现的。flexible主要做了几点。
简单介绍下rem布局方案 rem是css中的长度单位，1rem=根元素html的font-size值。...当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值，所有元素就会按比例放大或者缩小。...但这种方案有弊端（弊端之一：和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱；弊端之二：html文件头部需插入一段js代码 ），本文将介绍一种更优秀纯粹的方案。...若使用vw布局，就不需要再像rem那样，在js中去动态设置根元素的font-size了，sass中只需要使用这个函数做转换即可 //以iphone7尺寸@2x 750像素宽的视觉稿为例 @function...如果你的页面只适用于微信、qq，那绝对能放心使用vw单位，还可以配合vh针对一些特殊比例屏幕做处理，彻底摆脱使用rem带来的副作用，删掉html头部计算font-size的那段js代码，让你的代码更纯粹
我们现在可以把CSS中的px单位换成rem单位来进行测试。因为html根元素的字体大小是16px，那么换成rem单位，直接除以16就好。...src目录下，新建 libs/rem.js 输入如下代码 // 设置 rem 函数 function setRem () { // 320 默认大小16px; 320px = 20rem ;每个元素...let htmlDom = document.getElementsByTagName('html')[0]; //设置根元素字体大小 htmlDom.style.fontSize=...() } 在main.js中引入rem.js import '..../libs/rem.js'; 最后刷新页面看下，就会发现原本用px的单位已经自动换算成了rem;
rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN rem取值分为两种情况，设置在根元素时和非根元素时，举个例子： /* 作用于根元素，相对于原始大小...（16px），所以html的font-size为32px*/ html {font-size: 2rem} /* 作用于非根元素，相对于根元素字体大小，所以为64px */ p {font-size:...可以实现神奇的x 通过上面对rem的介绍，可以发现，如果子元素设置rem单位的属性，通过更改html元素的字体大小，就可以让子元素实际大小发生变化 html {font-size: 16px} p {width...，一般会限制最大宽度，比如在pc端查看我们的页面，此时vw就无法力不从心了，因为除了width有max-width，其他单位都没有，而rem可以通过控制html根元素的font-size最大值，而轻松解决这个问题...： 首先是字体的问题，字体大小并不能使用rem，字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；由于设置了根元素字体的大小，会影响所有没有设置字体大小的元素，因为字体大小是会继承的，难道要每个元素都显示设置字体大小
单位来实现适配 通过设置根元素的font-size，其他单位使用rem，但是需要引入一段js，动态判断当前设备的dpr，从而改变根元素的font-size，也是一种很好的方案，例如 著名的flexible.js...vh 中最大的那个 视口单位区别于%单位，视口单位是依赖于视口的尺寸，根据视口尺寸的百分比来定义的；而%单位则是依赖于元素的祖先元素。...截图来自X5内核－Can I Use 视口单位特点是宽度或者高度不同，对应的尺寸也会发生变化，从而达到适配即自适应，然而也有缺点，不能设置最大最小宽度限制，当比如横屏展示的时候，宽度很宽的情况下，必须设置最大...font-size限制，防止字体显示过大； 4、视口单位+rem布局 给根元素大小设置随着视口变化而变化的 vw 单位，这样就可以实现动态改变其大小。.../2)*1rem; } .flex-basis(@px) { flex-basis: (@px/@baseSize/2)*1rem; } // 根元素大小使用 vw 单位 html { font-size
根元素的 font-size 的时候，我们指定一个其他的页面元素为 2rem 的时候就是字体元素的 2 倍大小 看下面的例子 /* * 基本元素： 12px */ html {font-size:...* 20 * 16px = 320px*/ 来看看 rem 和 em 的区别 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font...size of the element 以自身元素字体大小为基准 rem 就是可以随时拿来用的一个固定参考值 怎么去计算 rem 通过 JavaScript 读取屏幕宽度，然后根据宽度计算出对应的尺寸并设置根元素的...如果在iphone8（375px）下设置元素font-size为 1.7066rem， 效果跟设置其font-size为 24px 是一样的(24 / 14.0625 = 1.7066)。...rem单位。
flex-direction 改变元素排列方向 row 改成x 默认值 column 改成y 移动适配 移动适配使用的两种类型的单位，rem和vw/vh。...rem 是一个相对单位，1rem为1html字号大小 rem使用 使用媒体查询设置差异化CSS样式 @media (媒体查询) { 选择器 { 属性...单位的尺寸 = px单位数值 / 基准根字号，一般情况都是设计稿尺寸除于37.5得到几个rem vw / vh 是一个相对单位，相对视口的尺寸计算结果vw：viewport widthl ，vh：viewport...3.75px flexible 移动设备视口宽度很多，我们不能一个一个使用媒体查询，我们使用flexible配合rem使用 flexible.js是手淘开发出的一个用来适配移动端的js框架。...核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
element 相对于根元素的字体大小 vw Relative to 1% of the width of the viewport* 相对于视口宽度的1% vh Relative to 1% of...众所周知，rem 是相对根元素的单位，而 em 是相对父级元素的，前者减少了层级关系的换算，使计算更准确，方便我们使用。 具体如何设置呢？这里提供三种方法，按需取用。原理一致，一通百通。...font-size: 1.4rem; /*10px * 1.4 = 14px*/ } 之后再媒体查询设置每个屏幕大小的根的 font-size 百分比，页面会根据设置的根 font-size 进行适配...则可以设置基准值为 100; 即 1rem=100px。那么整体屏幕就是 7.5 rem。...我们设定设计稿宽度为X rem,再倒推根元素设置的 font-size 应该是多大即可，然后根据不同的设备设置等比的根的 font-size。flexible.js 相当于帮你做了更详细的换算设定。
一、 rem实际开发适配方案 (1)按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小; (2)CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值...我们要做的,就是确定好我们当前设备的html文字大小就可以了 比如当前设计稿是750px,那么我们只需要把html文字大小设置为75px(750px/ 10)就可以 里面页面元素rem值:页面元素的...px值/ 75 剩余的,让flexible.js来去算 页面元素大小取值方法 ①最后的公式:页面元素的rem值=页面元素值(px) / (屏幕宽度/划分的份数)) ②屏幕宽度/划分的份数就是html...rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } 2.设置meta标签 3.引入flexible.js...把设计稿750px进行10等分，所以html文字大小设置为75px(750px/ 10)，页面元素rem值:页面元素的px值/ 75(750px/75)*/ width: 10rem;
16px = 320px*/ 看到这里你应该就会发现，只要我们根据不同屏幕设定好根元素的font-size，其他已经使用了rem单位的元素就会自适应显示相应的尺寸了。...对比em和rem： 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素字体大小为基准...3. rem计算 细心的同学就会发现了，我们使用rem单位事先需要做的一件事情就是设置根元素的font-size，通常有两种做法。...3.1 JS计算 通过JavaScript读取屏幕宽度，然后根据宽度计算出对应的尺寸并设置根元素的font-size。...既然是JS代码，为了避免造成因为动态设置元素的font-size而造成页面抖动，一般这部分代码我们放在header底部去加载，并内联到html文档里面。
= 320px*/ 看到这里你应该就会发现，只要我们根据不同屏幕设定好根元素的font-size，其他已经使用了rem单位的元素就会自适应显示相应的尺寸了。...对比em和rem： 单位 定义 特点 em font size of the root element 以根元素字体大小为基准 rem font size of the element 以父元素字体大小为基准...3. rem计算 细心的同学就会发现了，我们使用rem单位事先需要做的一件事情就是设置根元素的font-size，通常有两种做法。...3.1 JS计算 通过JavaScript读取屏幕宽度，然后根据宽度计算出对应的尺寸并设置根元素的font-size。...既然是JS代码，为了避免造成因为动态设置元素的font-size而造成页面抖动，一般这部分代码我们放在header底部去加载，并内联到html文档里面。
3. rem布局方式 rem是css3中新增加的长度单位，之前我们接触过em单位，em表示1em代表1个字体的宽度。而rem是根元素字体的大小，在网页中也就是设置的html根元素的字体大小。...随着设备尺寸的变宽，元素高度和宽度都相应放大 可以通过设置元素的宽高直接用rem单位，然后根据不同的屏幕的宽度设置不同的html字体的大小，来实现自动适配不同屏幕的目的。...html根元素的字体大小。...由于rem根据不同枚举的屏幕尺寸设置了不同的大小值，所以根据rem布局的元素会根据屏幕自动适配。...3.2 js实现动态改变根元素的字体大小 通过js动态获取屏幕的宽度（document.clientWidth）然后根据屏幕宽度动态计算出rem的实际值。
移动开发-rem适配布局 rem单位: rem (root em) 是一个相对单位，类似于em，em是父元素字体大小 不同的是rem的基准是相对于html元素的字体大小 比如, 根元素html设置font-size...=12px; 非根元素设置width:2rem; 换成px表示就是24px 父元素文字大小可能不一致，但整个页面只有一个html，可以很好来控制整个页面元素大小 什么是媒体查询: 媒体查询 (Media...实现元素动态大小变化: rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸 媒体查询可以根据不同设备宽度来修改样式 媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化...，从而达到等比缩放的适配 rem 实际开发适配方案: 按设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小 CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem...，那只需把html文字大小设置为 75px(750px / 10) 里面页面元素rem值：页面元素的px 值 / 75 剩余的，让flexible.js来去算 Github地址：https://github.com
left 和 right 如果设置百分比，则相对于直接非 static 定位（默认定位的）父元素的宽度。...2、子元素的 padding 和 margin 如果设置百分比，不论是垂直方向或者是水平方向都相对于直接父亲元素的 width，而与父元素的 height 无关。...三、rem 布局 1、rem 如何适配 rem 是相对于 html 根元素的字体大小的单位。 我们通过修改 html 中 font-size 的字体大小来控制 rem 的大小。...来动态修改不同屏幕尺寸下的 font-size 大小就可以实现等比例放大和缩小了 js 动态修改 html 根元素的 font-size 的大小，能适配不同尺寸的屏幕，不再局限于这 5 种 注： 我们可以用 flexible.js 插件来帮我们实现 flexible 原理就是根据不同的屏幕宽度动态的设置网页中 html 根节点的 font-size 然后咱们将所有的 px 用 rem
前言 移动端布局中，童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配。那么来讲讲rem在其中起的作用和如何动态设置rem的值。...1、什么是rem rem是相对于根元素（html标签）的字体大小的单位。 2、rem实现适配的原理 核心思想：百分比布局可实现响应式布局，而rem相当于百分比布局。 ...3、如何动态计算rem 核心代码块： // 动态为根元素设置字体大小 function init () { // 获取屏幕宽度...var width = document.documentElement.clientWidth // 设置根元素字体大小。...device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 5、使用体验： 我在项目中没有使用flexible.js
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
