首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

rem适用于fontsize,但不适用于高度和宽度

rem是一种相对单位,用于设置网页中的字体大小。它是相对于根元素(html)的字体大小来计算的。相比于其他单位(如px),rem具有一些优势:

  1. 响应式布局:由于rem是相对于根元素的字体大小来计算的,因此可以根据设备的屏幕大小动态调整字体大小,实现响应式布局。
  2. 统一调整:通过修改根元素的字体大小,可以一次性调整整个页面的字体大小,方便进行整体样式的调整。
  3. 简化计算:使用rem可以简化计算,特别是在涉及多个嵌套元素的情况下。相对于使用百分比或其他单位进行计算,rem更加直观和方便。

然而,rem并不适用于设置高度和宽度。因为rem是相对于字体大小来计算的,而高度和宽度通常与字体大小无关。在设置高度和宽度时,应该使用其他单位(如px、em等)来确保准确性和一致性。

腾讯云相关产品和产品介绍链接地址:

请注意,以上仅为腾讯云的一些相关产品,其他云计算品牌商也提供类似的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

H5页面适配及微信默认字号问题的最佳实践

的字体大小为 设备宽度 / 设计稿宽度 * 100 个px像素,以 iPhone 6/7/8 的宽度 375px 为例,则 html 字体的大小为 50px,即在宽度为 375 px 的设备上,1rem...对于开发人员,一个宽度为 50px 的 div,就可以很轻松的通过除以 100,计算出对应的 rem 为 0.5rem,不需要再根据各种机型进行适配,0.5rem 换算到 iPhone 6/7/8 为...横版页面的 rem 适配 上面第二部分通过动态设置 html 的 font-size 已经实现了页面随设计稿比例缩放,这种方式是页面宽度 100% 撑满设备宽度的,但是很多情况下,我们更希望部分横版页面能够高度撑满设备高度...document.documentElement.style.fontSize = 100 * clientHeight / 375 + 'px' 限制横版页面的最大宽度,假设最大宽度为 670px...htmlFontSize / instanceWidth : 1 return scale } // 设置 html 用于处理 rem 的 font-size 页面二次缩放 function

3.2K140

第132天:移动web端-rem布局(进阶)

,该方案自动帮你设置),此方案仅适用于移动端web !...(老方案是,屏幕越大元素越大;此方案是,屏幕越大,看的越多) 有效解决移动端真实1px问题(这里的1px 是设备屏幕上的物理像素) 如何使用 绝不是每个地方都要用remrem适用于固定尺寸!...比如你在效果图上量取的某个按钮元素长 55px, 宽37px ,那你直接可以这样写样式: .myBtn { width: 0.55rem; height: 0.37rem; } 下面是源码...答:假设你的效果图宽度是750,在这个效果图上可能有一个宽度为7rem(高清方案默认 1rem = 100px)的元素。...50px 如果dpr=2(如iphone 5 6),则html的font-size为100px,此时 1rem = 100px 如果dpr=3(如iphone 6 sp),则html的font-size

1.2K30

响应式布局rem布局

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

1.9K10

手机端页面自适应布局---rem

1024) { // docEl.style.fontSize = 100 * (1024 / 375) + 'px'; // } else { // docEl.style.fontSize...如果要切移动页面,你可以先把效果图宽度等比例缩放到640px。 2. 为什么要设置html的font-size? rem就是根元素(即:html)的字体大小。...根据上面的js代码,如果页面宽度低于640px,那么页面中html的font-size也会按照(当前页面宽度/640)的比例变化。...一般导航栏不用rem,而是用flex布局,这是因为导航栏点击最多,所以给他一个固定的大小(高度固定,宽度自适应)。...大家可以看看淘宝的这个手机页面 淘宝手机站,基本就是这种感觉,底部导航顶部搜索框用的高固定,宽自适应的方案,其余的部分基本都是随着浏览器宽度变化在等比例缩放。 最终页面代码首页代码大致如下 <!

1.8K52

微信小程序布局单位的使用

设计稿恰巧是750px,量出宽度是多少,那么你就定义多少rpx,假设设计稿640px宽度则就需要转换一下,你需要转换一下 1px = 750/640 rpx 微信小程序也支持rem尺寸单位,rem:相对单位...remrpx的换算关系:rem: 规定屏幕宽度为20rem;1rem = (750/20)rpx 在开发中, 1)....根据设计稿宽度算出rempx直接的转换公式 例如:640px的设计稿,转换公式就是按照上面js中这句而来【docEl.style.fontSize = 20 * (clientWidth / 320)...vw:viewpoint width,视口宽度,1vw等于视窗宽度的1%。 vh:viewpoint height,视口高度,1vh等于视窗高度的1%。...小程序中,窗口宽度固定为100vw,将窗口宽度平均分成100份,1份是1vw 小程序中,窗口高度固定为100vh ,将窗口高度平均分成100份,1份是1vh [图片.png] vmin:vwvh中较小的那个

3K61

CSS&HTML面经专题——(四)移动端响应式布局

视觉视口不会影响布局视口的宽度高度。 固定大小——跟屏幕大小相同,在上面。 layout viewport(布局视口):布局视口定义了pc网页在移动端的默认布局行为。...3、rem/ vhvw / 流式布局 (2)rem布局——等比缩放布局(网易新闻) ​em : 是一个相对单位,1em等于当前元素或父元素的font-size值。 ​...+ 'px'; 复制代码 介绍一个小插件:vscode的 px to rem 快捷键:ALT+Z (3)vh/vw vw:相对于视窗的宽度,视窗宽度是100vw vh:相对于视窗的高度...,宽度自适应,常用flex 对于大屏幕来说,用户体验并不是特别好,有些布局元素会显得很长 4、响应式布局自适应布局的区别 自适应布局 (1)出现的背景 在PC时代初期,网页设计者都会设计固定宽度的页面...它可以自动识别屏幕宽度、并做出相应调整。网页的排版布局展示的内容会有所变动。 (2)概念 根据屏幕大小变化,页面的内容排版布局会自动调整变动,已呈现更好的用户体验。

2.3K20

web移动端适配方案实践

Step1: 单位选择rem 在移动端,由于设备分辨率DPR(DevicePixelRatio)差异,使用px(像素)作为单位显然适配起来非常麻烦。...常见的单位有:px、em、rem、vw,这四种单位的介绍已经是老生常谈,本方案最后选择的是使用 rem,相比pxem,优势是毋庸置疑的,开发者不必再考虑设备分辨率改变导致的元素布局问题,只需要改变根元素...clientWidth) return; // 动态设置html标签字体大小,便于使用rem缩放 docEl.style.fontSize = 100 *...在移动设备的浏览器中input标签一般会有默认的样式,通过border=none,outline=none无法去除如立体效果、3d效果等,需要添加下列样式 -webkit-appearance: none; 3.最小宽度最大的宽度...,高度方向上由于页面的高度由内容撑开的,所以高度还是使用具体的值。

2.9K194

浅谈web自适应

这种解决方案相对前一种来说进步不少,不仅仅宽度实现了自适应,而且界面所有的元素大小高度都会根据不同分辨率屏幕宽度的设备来调整元素、字体、图片、高度等属性的值。...简单来说就是在不同的屏幕下,你看到的字体元素高宽度的大小是不一样的。在这里,有人就会说利用的是媒体查询属性,根据不同的屏幕宽度,调整样式。...实际上在这里,我们采用的是jscss属性rem来解决这个问题的。 REM属性指的是相对于根元素设置某个元素的字体大小。它同时也可以用作为设置高度等一系列可以用px来标注的单位。...所以,这时div的高度就是20px,宽度是30px,边框是1px,字体大小则是10px;一旦有了这样的方法,我们自然可以根据不同的屏幕宽度设置不同的根节点字体大小。...请注意,这里已经不是改变字体高度那么简单了,它直接改变的是布局样式!

1.3K40

web移动端适配方案实践

Step1: 单位选择rem 在移动端,由于设备分辨率DPR(DevicePixelRatio)差异,使用px(像素)作为单位显然适配起来非常麻烦。...常见的单位有:px、em、rem、vw,这四种单位的介绍已经是老生常谈,本方案最后选择的是使用 rem,相比pxem,优势是毋庸置疑的,开发者不必再考虑设备分辨率改变导致的元素布局问题,只需要改变根元素...clientWidth) return; // 动态设置html标签字体大小,便于使用rem缩放 docEl.style.fontSize = 100 *...在移动设备的浏览器中input标签一般会有默认的样式,通过border=none,outline=none无法去除如立体效果、3d效果等,需要添加下列样式 -webkit-appearance: none; 3.最小宽度最大的宽度...,高度方向上由于页面的高度由内容撑开的,所以高度还是使用具体的值。

1.6K30

移动端布局攻略

核心原则:文字为流式布局,宽度100%按照屏幕宽度缩放,高度固定px,水平采用百分比,或者固宽+变宽,图片固定大小或者百分比缩放,辅助flex布局 。有使用的最大媒体查询临界值(一般为640)。...缺点:在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度还是原来一样,实际显示非常的不协调,这就是流式布局的最致命的缺点 网易的rem布局 随着分辨率的增大,页面的效果会发生明显变化,...能够达到这种效果的根本原因就是因为网易页面里除了font-size之外的其它css尺寸都使用了rem作为单位,比如你看导航栏的高度设置代码: header,footer{ height:.90rem;...这样的话,每个页面中的宽高以及具体值只要除以100即可,而根节点的字号则是font-size=deviceWidth / 6.4,页面宽度如果是640px,则转换之后是6.4rem。...,随着分辨率的变化,页面元素的尺寸间距都相应变化,这是因为淘宝的尺寸也是使用了rem的原因。

1.4K60
领券