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

不兼容的单元px和rem (当前解决方案不起作用)

不兼容的单元px和rem是指在前端开发中,使用不同的单位来定义元素的尺寸,在某些情况下会导致布局错乱或者不一致的问题。

  1. 概念:px和rem是两种常见的长度单位,其中px是像素单位,表示相对于屏幕分辨率的一个点;而rem是相对单位,表示相对于根元素(html)的字体大小的倍数。
  2. 分类:px是绝对单位,具体值在不同设备上可能会有不同的物理像素;rem是相对单位,相对于根元素的字体大小进行计算。
  3. 优势:px的优势是精确控制元素的尺寸,适用于布局的细节控制;rem的优势是相对于根元素字体大小的相对计算,适用于响应式布局和适配不同设备。
  4. 应用场景:px常用于需要精确控制元素大小的情况,如按钮、图标等;rem常用于整体布局,适应不同设备的场景。
  5. 当前解决方案不起作用的原因可能有以下几个方面:
    • 浏览器对rem的支持不完善,特别是在旧版浏览器中可能无法正确解析rem。
    • 项目中使用的CSS预处理器或者构建工具可能没有正确配置px和rem的转换规则。
    • 代码中可能存在其他样式覆盖或者样式冲突的问题,导致rem单位的计算出现错误。

在腾讯云的产品中,可以使用腾讯云的Web+(https://cloud.tencent.com/product/tswp)来进行前端开发和部署。Web+支持自动处理像素单位和相对单位的转换,可以有效解决不兼容的单元px和rem的问题。

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

相关·内容

前端面试题-每日练习(3)

(5) 浏览器兼容问题五:图片默认有间距 问题症状:几个img标签放在一起时候,有些浏览器会有默认间距,加了问题一中提到通配符也不起作用。...(6) 浏览器兼容问题六:标签最低高度设置min-height兼容 问题症状:因为min-height本身就是一个兼容CSS属性,所以设置min-height时不能很好被各个浏览器兼容...碰到几率:5% 解决方案:如果我们要设置一个标签最小高度200px,需要进行设置为:{min-height:200px;height:auto!...相对于当前对象内文本字体尺寸。如当前对行内文本字体尺寸未被人为设置,则相对于浏览器默认字体尺寸(默认16px)。...(相对是的HTML元素字体大,默认16px) em与rem重要区别: 它们计算规则一个是依赖父元素另一个是依赖根元素计算

15020
  • 初学html常见问题总结

    1px粗(实际是2px) 表格由连续单元格构成,每个单元边框都独立存在,所以相临两个单元边框挨在一起变成了2px 添加这样属性:style=”...1px粗(实际是2px) 表格由连续单元格构成,每个单元边框都独立存在,所以相临两个单元边框挨在一起变成了2px 添加这样属性:style=”...,所以相临两个单元边框挨在一起变成了2px 添加这样属性:style=”border-collapse:collapse” 7、所设属性值不起作用 这个问题很另类,当代码书写成这样时:width...,所以相临两个单元边框挨在一起变成了2px 添加这样属性:style=”border-collapse:collapse” 7、所设属性值不起作用 这个问题很另类,当代码书写成这样时:width...,所以相临两个单元边框挨在一起变成了2px 添加这样属性:style=”border-collapse:collapse” 7、所设属性值不起作用 这个问题很另类,当代码书写成这样时:width

    3.6K41

    web前端学习工作笔记(三)

    5rem’,而是style=’width:5rem’ span内文字居中:(line-height高度等于span高度) span{ //左右居中 text-align: center; //上下居中...line-height:37px; width:138px; border:1px solid rgba(200,200,200,1); border-radius:5px; } 跨域问题...,f10逐行调试,f11进入当前函数,shift+f11跳出当前函数,f9逐步调试 cefsharpChromiumWebBrowser加载网页,输入框不能获取焦点,花了几个小时,解决方案: 1.网页中...scss继承样式 @entend 继承样式要写在当前样式之前,不然会被覆盖 mixin做数据拷贝,不支持共享变量修改,使用可修改全局变量,通过Vuexstore,调用方法去修改 vue等第三方控件修改样式方法...出现这个错误原因是,这个computed变量,一定在某个地方使用了类似 this.popupState2=xxx赋值操作,全局变量直接赋值,通过 setLoginInfo(data){

    64920

    再看CSS长度单位使用,做到胸有成竹

    前言 在日常开发过程中,对长度单位使用较为混乱。本瓜称之为“黑盒长度单位使用”。 涉及到网站需同时兼容 PC 移动端情况更甚:px、百分比、em、rem、vw etc....建议在屏幕上使用绝对长度单位,因为屏幕尺寸变化很大。但是,如果已知输出媒介,则可以使用它们,例如用于打印布局。...1% vmin Relative to 1% of viewport's* smaller dimension 当前vwvh中较小1% vmax Relative to 1% of viewport's...* larger dimension 当前vwvh中较大1% % Relative to the parent element 相对于父元素 你真的了解 px 吗 自然界标准长度单位 每天基本上都...上述方法是通常解决方案,适用大多数情况,但仍有兼容性情况需要考虑。

    20010

    面试官:你了解过移动端适配吗?

    像素(Pel,pixel;pictureelement),为组成一幅图像全部亮度色度最小图像单元。...如何适配 viewport 视口(viewport)代表当前可见计算机图形区域。...font-size:1rem } //如此即可 rem布局 不得不提flexible,flexible方案是阿里早期开源一个移动端适配解决方案,引用flexible后,我们在页面上统一使用rem来布局...这个方案只是个过渡方案,为什么说是过渡方案 因为当年viewport在低版本安卓设备上还有兼容问题,而vw,vh还没能实现所有浏览器兼容,所以flexible方案用rem来模拟vmin来实现在不同设备等比缩放...vhvw方案rem类似也是相当麻烦需要做单位转化,而且px转换成vw不一定能完全整除,因此有一定像素差。

    1.4K10

    rem在响应式布局中应用

    关于媒体查询还有媒体查询一些兼容性问题,网上介绍很多 其实响应式布局中主要困扰我们问题还是元素等比缩放。目前元素等比缩放主要有以下两种解决方案。 实现等比缩放一些方案 1....1. rem是的啥 rem是css中尺寸单位,rem是以根元素htmlfont-size大小为基准,例如2rem就是跟元素font-size两倍大小,一般浏览器默认是16px。...2. rem兼容性 既然要在pc端使用rem,自然需要关心rem兼容性问题,在http://caniuse.com/#search=rem我们可以看到ie9及以上都兼容rem,只不过ie9ie10,...你们响应式界面还要兼容ie8,好吧,你可以让你产品从兼容无线端与兼容ie8二选一了。实在不行也还可以通过css hack来降级个ie8不响应式版本,也是可以。...环保无污染 rem可以px、百分比等尺寸方案一起用,互不干扰。rem会在特定场景中帮助到你,而不需要你处处使用它。 2.

    1.6K40

    知识整理之CSS篇

    [endif]--> 常见浏览器兼容性问题与解决方案? 不同浏览器标签默认paddingmargin不同 问题症状:常用标签,不加样式控制情况下,各自margin、padding差异较大。...解决方案:在float标签样式中设置 #demo { display: inline } 当标签高度设置小于10px,在IE6、IE7中会超出自己设置高度 问题症状:IE6、7遨游里这个标签高度不受控制...伪类由一个冒号:开头,冒号后面是伪类名称包含在圆括号中可选参数。 任何常规选择器可以再任何位置使用伪类。伪类语法区别大小写。一些伪类作用会互斥,另外一些伪类可以同时被同一个元素使用。...结合 :after 伪元素 IEhack ,可以完美兼容当前主流各大浏览器,这里 IEhack 指的是触发 hasLayout。...rem rem是CSS3新增一个相对单位,rem是相对单位,是相对HTML根元素。

    1.6K20

    Clamp()、Max() Min() CSS 函数用例

    --1 { left: -8rem; } .decorative--2 { right: -8rem; } } 虽然这可行,但我们可以使用带有 CSS clamp() 函数无媒体查询解决方案...editors=1100 流体英雄高度 与前面的示例相关,英雄部分高度可以根据视口大小而不同。因此,我们倾向于通过媒体查询或使用视口单元来改变它。...首选值是 --loading CSS 变量的当前值。 最大值表示当前加载减去按钮宽度。 CSS clamp() 在这里为我们提供了这个组件三个不同统计信息,我个人喜欢这个解决方案!...,最大值是半圆减去当前百分比结果。...我解决方案是使用边框弹性框,这个方法是带有边框伪元素可以扩展以填充垂直水平状态可用空间。

    1.6K20

    2021前端面试高频 HTML + CSS

    解析模式 分为 标准模式 兼容模式. ❞ 2. 标准模式 与 兼容模式区别 ❝「标准模式」渲染方式 JavaScript 引擎解析方式都是以浏览器支持最高标准运行。...hover,表单元:disabled。...从而间接影响块级元素布局 最高点不会超过当前最高点、它前面的浮动元素最高点 超过它包含块,除非元素本身已经比包含块更宽 行内元素出现在左浮动元素右边右浮动元素左边,左浮动元素左边右浮动元素右边是不会摆放浮动元素...像素px是相对于显示器屏幕分辨率而言。 em em是相对长度单位。相对于当前对象内文本字体尺寸。...p {font-size:14px; font-size:.875rem;} 「使用最新版浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。」

    94040

    我碰到那些面试题html+css

    3,浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度 问题症状:IE6、7遨游里这个标签高度不受控制,超出自己设置高度 碰到频率:60% 解决方案...5,浏览器兼容问题五:图片默认有间距 问题症状:几个img标签放在一起时候,有些浏览器会有默认间距,通配符清除间距也不起作用。...本身就是一个兼容CSS属性,所以设置min-height时不能很好被各个浏览器兼容 碰到几率:5% 解决方案:如果我们要设置一个标签最小高度200px,需要进行设置为:{min-height:...可能是个人习惯吧,我不喜欢写代码IE兼容,然后用hack来解决。...= 54px 3.rem rem是CSS3新增一个相对单位,但相对只是HTML根元素。

    1.2K20

    CSS: 了解一下 REM

    前言 为了了解移动端布局兼容,特地来看看 REM....这篇文章主要介绍了: - rem 基础, - em 对比 - js解决方案 - flexable.js - scss less 兼容办法 Rem-Based Layout 先看看 rem...* 20 * 16px = 320px*/ 来看看 rem em 区别 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font...媒体查询 既然是根据屏幕宽度来设置元素大小,大部分同学应该想到是 css3 媒体查询来解决这个问题,其实这种方法也是我们最常用解决方案之一。...解决 px-->rem 应用 需要兼容大部分移动端,文字图片较多应用,比如淘宝,小说网之类应用可以使用这种方法 我们平时使用rem还有遇到一大问题就是我们习惯使用px来定义样式,而pxrem

    52210

    grid网格布局

    接下来我们试试合并单元格吧,像图二一样合并各种格子自由搭配 合并格子 .wrapper{ display: grid; padding: 1rem...,就是当前行第一第二个盒子合并,在下面可以轻松看出,我们没有对box3做任何操作,把box3当做一个盒子,显然box1有两个box3那么宽。...solid #ccc; padding: .5rem; } 来看看效果吧 来分析下吧,看起来很多代码对,实际上我们只需要关注这个模板即可...: 隐式网格宽度 兼容性 作为前端,我们逃不掉一个问题就是兼容性问题了,看似强大grid布局为什么在日常中使用却不多呢,那就是因为目前grid布局还不够普及导致兼容性还较差,在低版本浏览器是无法使用...,也许目前兼容性还没有flex好,但是慢慢应该grid布局就会兼容更多了,大家可以先学习了,多做尝试,你是否也会觉得他很神奇呢?

    1.9K40

    移动端开发中遇到坑点及总结(持续更新)

    五、iphoneH5页面click点击事件生效 六、代码书写规范 七、ajax()关于请求超时同异步处理 八、设置rem 前言 本文主要是记录自己在移动端开发中遇到一些坑点或者总结(持续更新,...原因:貌似是有部分Android机型有自己默认line-height,我们额外设置line-height不起作用。...我们做移动端开发时,为了兼容性,大多数情况下是使用rem进行开发,而很少用px进行开发,以下是rem设置文件,copy保存在一个js文件中,然后在页面引入这个js文件就可以使用了 (function...这里额外说明下rempx,em这三个单位区别: px就是像素,这个没什么好说 em是指根据父元素来进行设置大小,如果父元素font-size:16px,那子元素设置font-size:2em,就相当于设置了...font-size:32px remem类似,只不过多了root,即是根据root字体大小进行设置

    99630

    前端硬核面试专题之 CSS 55 问

    ---- 常见兼容性问题? 浏览器默认 margin padding 不同。解决方案是加一个全局 *{margin: 0; padding: 0;} 来统一。...: 200px; line-height:200px; color: #FFF; } (2)多行行内元素解决方案组合 使用 display: table-cell vertical-align...px 像素(Pixel)。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言。(引自CSS2.0手册) em 是相对长度单位。相对于当前对象内文本字体尺寸。...选择没有子元素元素 :target 选取当前活动目标元素 :not(selector) 选择除 selector 元素意外元素 :enabled 选择可用单元素 :disabled 选择禁用单元素...相对于当前对象内文本字体尺寸。如当前对行内文本字体尺寸未被人为设置,则相对于浏览器默认字体尺寸。 任意浏览器默认字体高都是 16px。 所有未经调整浏览器一般都符合: 1em = 16px

    2K20

    前端基础知识概述 -- 移动端开发屏幕、图像、字体与布局兼容适配

    而本文主题 -- 移动端开发兼容适配与性能优化,就是希望能从一些常见移动端开发问题出发,厘清 Web 移动端开发前前后后,一些技术发展过程,一些问题优化手段以及给出一些常见兼容性问题解决方案... 动态修改   font-size ,页面其他元素使用 rem 作为长度单位进行布局,从而实现页面的等比缩放 关于头两点,其实现在 lib-flexible 库已经这样做了,不再去缩放...rem 解决方案,有的不会对 Viewport 进行缩放处理,自行处理 1px 边框问题。...怎么确定当前场景会选取哪张图片呢? 1. 当前屏幕 dpr = 2 ,CSS 宽度为 375px当前屏幕 CSS 宽度为 375px,则图片 CSS 宽度为 300px。...当前屏幕 dpr = 1 ,CSS 宽度为 1920px当前屏幕 CSS 宽度为 1920px,则图片 CSS 宽度变为了 600px

    3.1K32

    pc ipad 端网站适配

    pc 端 如何实现字体自适应 // 根据屏幕大小适配字体 let resetPc = () => { var wH = window.innerHeight; // 当前窗口高度 var...wW = window.innerWidth; // 当前窗口宽度 var whdef = 100 / 1920; // 表示1920设计图,使用100PX默认值 if (wW...> 1366) { var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下相应FONT-SIZE值 var html = document.documentElement...{font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; } rempx转换 更靠谱H5横竖屏检测方法(js代码...360 浏览器 没问题 360极速浏览器 没问题 搜狗浏览器 没问题 chrome 内核 2345 浏览器 IE 内核 没问题 QQ 浏览器 IE 内核 UC 浏览器 webkit 内核,谷歌内核 IE 兼容

    2.9K30

    响应式布局rem布局

    我们做h5页面只能在移动端访问(rem兼容低级版本浏览器) 第一步:从UI设计师拿到设计稿(psd) 640*1136 第二部:在样式中给HTML一个fontSize值,我们一般都给一个比较好算值...在这里我们之所有用100px,主要是浏览器最小字体大小都是12px,用10px比例会存在偏差 html{ font-size: 100px;/*1rem=100px*/...100,计算出对应rem值,我们设定也都是rem值 (值得注意点是外层盒子宽度我们一般还是写固定值,沿用流式布局思想) 第四步:根据当前屏幕宽度设计稿宽度来计算我们HTMLfontSize...值 设计稿:640 fontSize=100 手机:320 fontSize=50 手机:375 fontSize=58.59375 // 根据当前屏幕宽度设计稿宽度比例...,动态计算一下宽度下fontSize值应该是多少,如果fontSize值改变了,之前rem会自动跟着放大或缩小 ~function () { var desW=640,

    1.9K10

    能让你受益匪浅10个css使用技巧

    02 文字居中兼容 正常处理文字上下居中手段是让元素heightline-height相等,但是安卓环境下当字体大小<14px/0.7rem时候会出现居中失效情况。...margin负值 margin: -0.35rem -0.45rem 0;调整 有解决方案是将rem改为px。...04 使用currentColor来简化css 设置border-color、background-color等颜色时候,可以使用currentColor[与当前元素字体颜色相同]来简化css。...07 翘边阴影实现 利用:before:after,加上绝对定位性质,可以形成一个矩形,这个时候结合CSS3倾斜属性skew旋转属性rote。...10 页面自适应最佳实践 经过大型项目实践,下面这段CSS是最好基于remvmcalc实践代码: html { font-size: 16px; } @media screen and (

    1.6K20
    领券