- 综合排序
- 最热优先
- 最新优先
- 来自专栏河湾欢儿的专栏
响应式布局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的值 设计稿 n=winW/desW; document.documentElement.style.fontSize=n*100+'px'; }(); jd移动布局
2.3K10发布于 2018-09-06 - 来自专栏技术社区
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； 也就是说 1rem = 100px；所以标题的 font-size 的大小为 26/100=0.26rem； 2.如何实现兼容各种屏幕大小的设备 (); window.onresize = rem; </script>
1.7K30编辑于 2022-06-16 - 来自专栏网络日志
rem响应式布局-自动将px转换为rem--px2rem插件的使用
当你在项目中采用rem做响应式页面的时候，如果代码里面写的是rem单位的话，会不好判断各种距离、宽高的具体数值，下面介绍一款插件：px2rem，使用此插件可以在代码里依然写px，启动项目会自动将 px单位转换为可响应的rem单位 第一步 installcnpm install postcss-px2rem px2rem-loader --save 第二步 在项目src目录下新建util文件夹（如已有请忽略 2，可根据实际业务需求调整） document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' } // /util/rem' 第四步 在项目根目录新建vue.config.js文件（如已有请忽略），并在其中添加如下代码 // 引入等比适配插件 const px2rem = require('postcss-px2rem ') // 配置基本大小 const postcss = px2rem({ // 基准大小 baseSize，需要和rem.js中相同 remUnit: 16 }) // 使用等比适配插件
2.3K10编辑于 2024-06-22 - 来自专栏h5学习笔记
rem适配布局
比如,根元素( html)设置font -size= 12px;非根元素设置width:2rem;则换成px表示就是24px。 2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。 为单位的值; 4.2 rem适配方案技术使用(市场主流) 技术方案1 rem 媒体查询 less 技术方案2 (推荐) flexible.js rem rem实际开发适配方案 是2rem * 2 rem比例是1比1 ⑧320屏幕下 ，html 字体大小为21.33，则2rem = 42.66px，此时宽和高都是42.66，但是宽和高的比例还是1比1 ⑨但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果 rem值 = 页面元素值( px) / html font-size字体大小 rem适配方案2 简洁高效的rem适配方案flexible.js 手机淘宝团队出的简洁高效移动端适配库 我们再也不需要在写不同屏幕的媒体查询
2.3K30发布于 2020-09-30 - 来自专栏clz
rem适配布局
rem 适配布局 rem 单位 rem 是根 em(root em)的缩写，是相对于根元素(html 元素)的字体大小。 比如，根元素（html）设置 font-size = 12px;非根元素设置 width: 2rem;则换成 px 表示就是 24px。 } } @media screen and (min-width: 750px) { html { font-size: 50px; } } div { width: 2rem ; height: 2rem; background-color: pink; } </style> <body>
</body> </html> rem 适配方案 1： less 媒体查询 rem 插件 easy less rem 适配方案 2： flexible.js rem 插件 cssrem 参考： pink 老师前端入门教程1.9K30编辑于 2023-01-02 - 来自专栏编程之旅
Rem布局的原理探究
在用前端给移动端页面写布局时，我接触到了Rem布局，但是老实说我也看了几篇手淘适配的文章，并且主要的目的是拿到代码写出demo，所以对于Rem我还是停留在只会使用的阶段，但是理解的并不透彻，所以要抽出时间 ，把rem布局的原理搞清楚。 2rem，那么rem作用于根元素的字体大小相当于其初始字体大小的定论的话，html的字体大小就是32px。 p { font-size: 2rem; } 而上面p标签的这个例子中，我们之前已经知道html的字体大小是32px，那么p标签的字体大小就是2 * 32px = 64px。 ，rem可能更适合写布局，而em可能就更适合来表达字体大小。
1.8K30发布于 2018-08-30 - 来自专栏学习猿地
Web前端学习 第2章 网页重构18 rem布局
为了实现百分比的效果，又能省去大量的计算工作，我们使用rem布局。 三、rem布局 我们已经了解了rem的基本概念，再来看看如何利用rem单位制作出可以适应不同尺寸设备的页面。 这说明rem布局与百分比布局能实现相同的效果。 四、设计稿量尺 我们再从web开发流程的角度来看，为什么rem布局比百分比布局更加简便，使用rem布局的流程如下所示： 首先，我们拿到设计师的设计稿，通常设计稿的宽度为640px、720px、1080px 通过上述的方法，就可以很容易制作出按百分比排列的页面布局了，这就是rem布局的优势。 课后练习 按照设计稿，完成融职教育手机端的首页。 按照设计稿，完成融职教育手机端的视频详情页面。
56130发布于 2020-06-15 - 来自专栏前端学习笔记
移动web开发之rem布局
rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size: 2rem ; } rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。
88651发布于 2020-10-26 - 来自专栏用户9378957的专栏
Rem布局的原理解析
我一直觉得em就是为字体和行高而生的，有些时候子元素字体就应该相对于父元素，元素行高就应该相对于字体大小；而rem的有点在于统一的参考系。 Rem布局原理 rem布局的本质是什么？ 其实rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UE图能够等比缩放，那该多么美好啊。 : 2rem} /* 32px*/ html {font-size: 32px} p {width: 2rem} /*64px*/ 如果让html元素字体的大小，恒等于屏幕宽度的1/100，那1rem } 其实有了postcss后，这个过程应该放到postcss中，源代码如下 p {width: 100px2rem} postcss会对px2rem这个单位进行处理，处理后的结果如下，感兴趣的话来写一个 font-size最大值，而轻松解决这个问题 Rem不是银弹 rem是弹性布局的一种实现方式，弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示
1.6K20编辑于 2022-07-08 - 来自专栏一个会写诗的程序员的博客
前端布局单位选择之 rem
前端布局单位选择之 rem Root em（REM）是CSS3中新定义的一种长度单位。和之前的em单位相比在使用上具有明显的优势。 进行布局的话建议用less去写，因为less中可以用变量，这样我们可以省去频繁用计算器的时间了。 less中我们可以这样写； @rem:40rem; 定义变量@rem 这里的40是指你打开谷歌开发者工具后点击移动端模拟时的html的font-size大小。 div{ width:200/@rem; } less会在编译的时候给计算出结果。
81910发布于 2018-08-17 - 来自专栏前端儿
细说移动端 经典的REM布局 与 新秀VW布局
而另一方面，还有一些 布局概念： 1. 静态布局 直接使用px作为单位 2. 流式布局 宽度使用%百分比，高度使用px作为单位 3. 自适应布局 创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。 使用 @media媒体查询来切换多个布局 4. 响应式布局 通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用 5. 弹性布局 通常指的是rem或em布局。 五、REM + VW布局 讲的太乱了？自己去看代码 为了解决纯VW布局不能设置最大最小宽度的问题，我们引入REM。 一般来说，可用直接考虑使用REM布局 2. 因REM使用了JS动态设置html的font-size，且scale对安卓机型不太友好，要求极致的可以选用VW 3. 纯VW布局不支持设置容器最大最小宽高，如果需要此功能则选用 REM + VW布局 ? 2. 食用方式 怎么使用呢？
12.7K42发布于 2018-10-09 - 来自专栏前端知否
移动端网页布局适配rem方案小结
如果改变html元素的字体大小，rem的值也就跟着改变，对应的其他使用rem的布局尺寸，也会跟着改变，从而达到适配的目的，保证比例一致。 d.match(/rem$/)) { val += 'px'; } return val; } flexible.px2rem ($radius); border-top-right-radius: px2rem($radius); border-bottom-left-radius: px2rem($radius); border-bottom-right-radius: px2rem($radius); } // @include banner(100) @mixin banner($height) { px2rem(24); a { font-size: px2rem(24); font-weight: bold; color: #2c3e50; &.router-link-exact-active
1.5K40发布于 2020-03-23 - 来自专栏前端自习课
【CSS】872- 浅析rem布局方案
如果dpr为2的话，那么1px = 2物理像素，x轴y轴加起来就是4 ? 以此类推 在js中可以通过window.devicePixelRatio获取当前设备的dpr。 对于这种情况，只能采用@2x、@3x这样的倍图来适配高清展示，这样侧向说明了为什么照着iphone6做的ui稿不是375，而是750的问题。 1px的粗细问题 由于1px的实际大小是一样的，只是里面的物理像素数量不同，所以如果直接写1px是没问题的，不会出现粗细不同的情况，但是这样一来retina的优势也rem的作用也就没了，其实还是dpr的问题 ，还是归咎于用户体验，所以，我们还需要一个视口-理想视口（同样是虚拟视口），不过这个理想视口的大小是等于布局视口的，这样用户就能得到更好的浏览体验。 + 'px'; } initRem(); window.onresize = window.onorientationchange = initRem(); 对于引入的第三方ui组件，需要使用px2rem
1K20发布于 2021-02-26 - 来自专栏编程社区
手机端页面自适应布局---rem
rem布局，在页面中引入这都js代码。 2. 为什么要设置html的font-size？ rem就是根元素（即：html）的字体大小。 此时，宽60px，高40px的元素样式就这样设置如下↓ width: 3rem;height: 2rem; 是不是发现这换算起来有点麻烦。如果我们一开始把html的font-size设为100px呢？ 这样，页面中凡是应用了rem的作尺寸单位的元素都会随着页面变化而等比例缩放了！ 3. 有哪些情况可是使用rem布局？ 大部分情况下都可以使用rem布局，当然具体情况还要看情况而定。 一般导航栏不用rem，而是用flex布局，这是因为导航栏点击最多，所以给他一个固定的大小（高度固定，宽度自适应）。
2.2K52编辑于 2022-01-27 - 来自专栏前端知识分享
第130天：移动端-rem布局
一、关于布局方案 当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。 之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。 此时我们从图中若某个标注为100px，那么css中就应该设置为100/75 = 1.333333rem。所以为了提高开发效率，可以使用px转化为rem的插件。 如果你使用sublimeText，可以用 rem-unit ? 纵向的单位可以全部使用px，横向的使用rem，因为移动设备宽度有限，而高度可以无限向下滑动。
1.8K40发布于 2018-09-11 - 来自专栏学习猿地
【融职培训】Web前端学习 第2章 网页重构18 rem布局
为了实现百分比的效果，又能省去大量的计算工作，我们使用rem布局。 三、rem布局 我们已经了解了rem的基本概念，再来看看如何利用rem单位制作出可以适应不同尺寸设备的页面。 这说明rem布局与百分比布局能实现相同的效果。 四、设计稿量尺 我们再从web开发流程的角度来看，为什么rem布局比百分比布局更加简便，使用rem布局的流程如下所示： 首先，我们拿到设计师的设计稿，通常设计稿的宽度为640px、720px、1080px 通过上述的方法，就可以很容易制作出按百分比排列的页面布局了，这就是rem布局的优势。
58810发布于 2020-06-17 - 来自专栏刘悦的技术博客
rem在响应式布局中的应用
rem在响应式布局中的应用 最近做了一些响应式的页面，遇到了一些问题，想了些解决方法，在这里总结一下。目前响应式的主流实现方式是百分比布局，加上媒体查询@media screen。 2. 1. rem是的啥 rem是css中的尺寸单位，rem是以根元素html的font-size的大小为基准的，例如2rem就是跟元素font-size两倍的大小，一般浏览器默认是16px。 2. rem兼容性 既然要在pc端使用rem，自然需要关心rem的兼容性问题，在http://caniuse.com/#search=rem我们可以看到ie9及以上都兼容rem，只不过ie9和ie10， 环保无污染 rem可以和px、百分比等尺寸方案一起用，互不干扰。rem会在特定场景中帮助到你，而不需要你处处使用它。 2.
2.6K40编辑于 2022-08-08 - 来自专栏全栈自学笔记
移动web开发之rem适配布局
移动web开发之rem适配布局 方案： 页面布局文字能否随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局，那高度如何布局？ 比如，根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px. /* 1.em相对于父元素 的字体大小来说的 */ /* width: 10em; height: 10em; */ /* 2.rem : aqua; /* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小 可以整体控制 */ } </style> 2.媒体查询 是2rem2rem 比例是1比1 320屏幕下，html字体大小为21.33 则2rem = 42.66px 此时宽和高都是42.66px 但是宽和高的比例还是1比1 但是已经能实现不同屏幕下
2.3K20发布于 2020-10-27 - 来自专栏全栈程序员必看
理解rem实现响应式布局原理及js动态计算rem「建议收藏」
前言 移动端布局中，童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配。那么来讲讲rem在其中起的作用和如何动态设置rem的值。 1、什么是rem rem是相对于根元素（html标签）的字体大小的单位。 2、rem实现适配的原理 核心思想：百分比布局可实现响应式布局，而rem相当于百分比布局。 实现手段：动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。表达式为rem = width / n。 通过此方法，rem大小始终为width的n等分。 为width的1/10.即实现了百分比布局 4、tip： 1、以上代码需在dom之前写入（可放在head里面第一个script标签） 2、移动端加上meta标签<meta name="viewport 另外说明一点，此方法实现的功能也相对简单，只实现了最核心的动态修改<em>rem</em>的值。
8.8K11编辑于 2022-07-20 - 来自专栏睡不着所以学编程
移动web开发(5)之rem适配布局
单位 rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小.比如,根元素(html)设置font-size=12px;非根元素设置width:2rem,则换成px表示就是24px.也就是说rem这个单位之看html 实现元素动态大小变化 rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸,媒体查询可以根据不同设备宽度来修改样式,媒体查询+rem就可以实现不同设备宽度,实现页面元素大小的动态变化 时: .box div { width: 100%; height: 100px; background-color: pink; } .box div:nth-child(2) float: left; width: 50%; height: 100px; background-color: pink; } .box div:nth-child(2)
1.4K30编辑于 2022-09-20
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号