- 综合排序
- 最热优先
- 最新优先
- 来自专栏河湾欢儿的专栏
响应式布局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 - 来自专栏h5学习笔记
rem适配布局
1、rem基础 rem单位 rem (root em)是一个相对单位 ,类似于em , em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制 2、媒体查询 2.1什么是媒体查询 媒体查询( Media Query )是CSS3新语法。 3.媒体特性 每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。 <link rel="stylesheet" href="320px.css" media="screen and (min-width: 320px)"> 3、Less基础 3.1维护css的弊端 CSS 3.元素大小取值方法 ①最后的公式：页面元素的rem值=页面元素值(px) / ( 屏幕宽度/划分的份数) ②屏幕宽度 / 划分的份数 就是 html font-size 的大小 ③或者：页面元素的
2.3K30发布于 2020-09-30 - 来自专栏clz
rem适配布局
rem 适配布局 rem 单位 rem 是根 em(root em)的缩写，是相对于根元素(html 元素)的字体大小。 rem 作用于非根元素字体大小时，相对于根元素字体大小；rem 作用于根元素字体大小时，相对于其初始字体的大小。 媒体查询 介绍 媒体查询(Media Query)是 CSS3 新语法。 : (30 + 82 / 50rem) // 或 height: 30 + (82 / 50rem); font-size: 82 + 15px + 3rem; } 生成的CSS 1： less 媒体查询 rem 插件 easy less rem 适配方案 2： flexible.js rem 插件 cssrem 参考： pink 老师前端入门教程
1.9K30编辑于 2023-01-02 - 来自专栏编程之旅
Rem布局的原理探究
在用前端给移动端页面写布局时，我接触到了Rem布局，但是老实说我也看了几篇手淘适配的文章，并且主要的目的是拿到代码写出demo，所以对于Rem我还是停留在只会使用的阶段，但是理解的并不透彻，所以要抽出时间 ，把rem布局的原理搞清楚。 什么是em 我相信所有接触学习过css布局的同学，一定在rem之前先听到过em的大名，但是大多数也许跟我一样，只是听过或者最多跟着W3C上的教程敲过一下demo，之后的工作学习中并没有使用em这个单位， rem是css3引入的一个单位，那我们为什么要在有em这个可以充当弹性布局的单位时还要引入rem呢？ em可以让我们的页面更灵活，比起到处写死的px值，em显得更有张力，根据比例的变化来调节屏幕。 ，rem可能更适合写布局，而em可能就更适合来表达字体大小。
1.8K30发布于 2018-08-30 - 来自专栏前端学习笔记
移动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，可以很好来控制整个页面的元素大小。 媒体查询 什么是媒体查询 媒体查询（Media Query）是CSS3新语法。
88651发布于 2020-10-26 - 来自专栏用户9378957的专栏
Rem布局的原理解析
什么是Rem rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em。 我一直觉得em就是为字体和行高而生的，有些时候子元素字体就应该相对于父元素，元素行高就应该相对于字体大小；而rem的有点在于统一的参考系。 Rem布局原理 rem布局的本质是什么？ 其实rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UE图能够等比缩放，那该多么美好啊。 px2rem的postcss插件吧 p {width: 15.625rem} 比Rem更好的方案 上面提到想让页面元素随着页面宽度变化，需要一个新的单位x，x等于屏幕宽度的百分之一，css3带来了rem 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布局。 兼容性：在移动端 iOS 8 以上以及 Android 4.4 以上获得支持 可以去 Can I use 或 css3test 查看兼容情况 三、REM布局 讲的太乱了？ 五、REM + VW布局 讲的太乱了？自己去看代码 为了解决纯VW布局不能设置最大最小宽度的问题，我们引入REM。 一般来说，可用直接考虑使用REM布局 2. 因REM使用了JS动态设置html的font-size，且scale对安卓机型不太友好，要求极致的可以选用VW 3.
12.7K42发布于 2018-10-09 - 来自专栏前端知否
移动端网页布局适配rem方案小结
前言 根据 W3C 规范中对 1rem 的定义： 1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时，rem 单位以该属性的初始值作参照。 如果改变html元素的字体大小，rem的值也就跟着改变，对应的其他使用rem的布局尺寸，也会跟着改变，从而达到适配的目的，保证比例一致。 ，用2倍的方案，其余的用1倍方案 if (devicePixelRatio >= 3 && (! dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio ] & { font-size: $font-size * 3; } } App.vue, 使用px2rem进行转换 <style lang="scss"> @import "@/assets
1.5K40发布于 2020-03-23 - 来自专栏编程社区
手机端页面自适应布局---rem
rem布局，在页面中引入这都js代码。 布局的核心代码，这段代码的意思是： 如果页面的宽度超过了640px，那么页面中html的font-size恒为100px。 此时，宽60px，高40px的元素样式就这样设置如下↓ width: 3rem;height: 2rem; 是不是发现这换算起来有点麻烦。如果我们一开始把html的font-size设为100px呢？ 这样，页面中凡是应用了rem的作尺寸单位的元素都会随着页面变化而等比例缩放了！ 3. 有哪些情况可是使用rem布局？ 大部分情况下都可以使用rem布局，当然具体情况还要看情况而定。 一般导航栏不用rem，而是用flex布局，这是因为导航栏点击最多，所以给他一个固定的大小（高度固定，宽度自适应）。
2.2K52编辑于 2022-01-27 - 来自专栏前端自习课
【CSS】872- 浅析rem布局方案
对于这种情况，只能采用@2x、@3x这样的倍图来适配高清展示，这样侧向说明了为什么照着iphone6做的ui稿不是375，而是750的问题。 1px的粗细问题 由于1px的实际大小是一样的，只是里面的物理像素数量不同，所以如果直接写1px是没问题的，不会出现粗细不同的情况，但是这样一来retina的优势也rem的作用也就没了，其实还是dpr的问题 （虚拟视口），这个视口大小接近于pc，大部分都是980px visual viewport 有了布局视口，还缺一个承载它的真是视口，也就是移动设备的可视区域-视觉视口（物理视口）,这个尺寸随着设备的不同也有不同 这样在视觉视口中创建了一个布局视口，类似overscroll:scroll;这样，可以通过滚动拖拽、缩放扩大进行较好的访问体验 ideal viewport 像上面的体验在早些年可能比较多，但是近几年几乎很少了 ，还是归咎于用户体验，所以，我们还需要一个视口-理想视口（同样是虚拟视口），不过这个理想视口的大小是等于布局视口的，这样用户就能得到更好的浏览体验。
1K20发布于 2021-02-26 - 来自专栏网络日志
rem响应式布局-自动将px转换为rem--px2rem插件的使用
当你在项目中采用rem做响应式页面的时候，如果代码里面写的是rem单位的话，会不好判断各种距离、宽高的具体数值，下面介绍一款插件：px2rem，使用此插件可以在代码里依然写px，启动项目会自动将 px单位转换为可响应的rem单位 第一步 installcnpm install postcss-px2rem px2rem-loader --save 第二步 在项目src目录下新建util文件夹（如已有请忽略 ），在util文件夹下新建rem.js文件，内容如下： // rem等比适配配置文件 // 基准大小 const baseSize = 16 // 设置 rem 函数 function setRem /util/rem' 第四步 在项目根目录新建vue.config.js文件（如已有请忽略），并在其中添加如下代码 // 引入等比适配插件 const px2rem = require('postcss-px2rem ') // 配置基本大小 const postcss = px2rem({ // 基准大小 baseSize，需要和rem.js中相同 remUnit: 16 }) // 使用等比适配插件
2.3K10编辑于 2024-06-22 - 来自专栏前端知识分享
第130天：移动端-rem布局
一、关于布局方案 当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。 之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。 此时我们从图中若某个标注为100px，那么css中就应该设置为100/75 = 1.333333rem。所以为了提高开发效率，可以使用px转化为rem的插件。 如果你使用sublimeText，可以用 rem-unit ? 3. border、box-shadow、border-radius等一些效果应该使用px作为单位。
1.8K40发布于 2018-09-11 - 来自专栏刘悦的技术博客
rem在响应式布局中的应用
rem在响应式布局中的应用 最近做了一些响应式的页面，遇到了一些问题，想了些解决方法，在这里总结一下。目前响应式的主流实现方式是百分比布局，加上媒体查询@media screen。 3. 使用rem的优点 刚开始是为了解决元素等比缩放的问题，才用上rem的，但是在试用过程中发现rem的响应式布局方案拥有以下一些优点。 1. 比百分比布局更具优势 百分比布局始终是相对父元素的，对于嵌套比较深的元素，大家是不是在计算百分比的时候异常头疼，稍不留神就弄错分母了，并且，嵌套过深也会影响精度。 而rem布局的分母只有一个就是视口宽度。妈妈再也不用担心我弄错分母了。 3.
2.6K40编辑于 2022-08-08 - 来自专栏全栈自学笔记
移动web开发之rem适配布局
移动web开发之rem适配布局 方案： 页面布局文字能否随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局，那高度如何布局？ : aqua; /* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小 可以整体控制 */ } </style> 2.媒体查询 2.1什么是媒体查询 媒体查询(Media Query)是css3新语法。 only：指定某个特定的媒体类型，可以省略 3.媒体特性 每种媒体类型都是具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。 页面元素盒子等比例缩放效果 3.元素大小取值方法 最后的公式：页面元素的rem值=页面元素值（px）/ （屏幕宽度/划分的份数） 屏幕宽度/划分的份数 就是html font-size的大小
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等分。 3、如何动态计算rem 核心代码块： // 动态为根元素设置字体大小 function init () { // 获取屏幕宽度 为width的1/10.即实现了百分比布局 4、tip： 1、以上代码需在dom之前写入（可放在head里面第一个script标签） 2、移动端加上meta标签<meta name="viewport
8.8K11编辑于 2022-07-20 - 来自专栏睡不着所以学编程
移动web开发(5)之rem适配布局
虽然说子盒子为弹性容器的时候,虽然是没有行内元素和块级元素的区别了,但是当里面没有内容的时候,设置了大小也还是不生效的.案例自己做的时候发现也没那么麻烦啦,只是刚学习了新的知识点 , 所以写起来还是比较慢的. 01 rem 单位 rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小.比如,根元素(html)设置font-size=12px;非根元素设置width:2rem,则换成px表示就是24px.也就是说rem这个单位之看html ,如果想要实现自适应,那就只要修改html的字体大小即可,但是em的话则要修改许许多多的盒子. 02 媒体查询 媒体查询(Media Query)是CSS3的新语法 使用@media查询,可以针对不同的媒体类型定义不同的样式 实现元素动态大小变化 rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸,媒体查询可以根据不同设备宽度来修改样式,媒体查询+rem就可以实现不同设备宽度,实现页面元素大小的动态变化
1.4K30编辑于 2022-09-20 - 来自专栏前端知识分享
第132天：移动web端-rem布局（进阶）
rem布局（进阶版） 该方案使用相当简单，把下面这段已压缩过的 原生JS（仅1kb，源码已在文章底部更新，2017/5/3） 放到 HTML 的 head 标签中即可（注:不要手动设置viewport 此方案也是默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。 3.问：不是 1rem = 100px吗，为什么我的代码写了一个宽度为3rem的元素，在电脑端的谷歌浏览器上宽度只有150px? 由于这个效果图对应设备的dpr=3，也就是1rem = 50 × 3 = 150px。所以如果你量取了一个宽度为90px的元素，它的css宽度应该为 90/150=0.6rem。 绝大多数你遇到的问题，都是由于对rem布局理解不到位导致的。
1.5K30发布于 2018-09-11 - 来自专栏海仔技术驿站
前端成神之路-移动web开发_rem布局
移动web开发之rem布局 rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 媒体查询 什么是媒体查询 媒体查询（Media Query）是CSS3新语法。 是 2rem2rem 比例是1比1 ⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1 ⑨但是已经能实现不同屏幕下 ：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小 苏宁首页 苏宁首页地址 ：苏宁首页 1、 技术选型 方案：我们采取单独制作移动页面方案 技术：布局采取rem适配布局 3、设置视口标签以及引入初始化样式 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale
1.3K21发布于 2020-12-01
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号