CSS的单位和应用场景及Rem的设置

最新推荐文章于 2024-10-14 12:46:45 发布
最新推荐文章于 2024-10-14 12:46:45 发布
阅读量472 收藏 1
点赞数 3
分类专栏： CSS类 文章标签： CSS单位及应用场景
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/np918/article/details/95028920
版权

对于px，em，rem的理解

pxemremrpx
绝对单位相对单位相对单位绝对单位
独来独往，棱角分明，一就是一，二就是二，1px就是显示器上的1像素听从父元素的，没有半点主张听html的，下面所有的元素都听html的1rpx就是显示器上的0.5px
px单位的代码成本比较高页面层级比较复杂时候不适合用注意浏览器的兼容性小程序独有
一般用于网站的搭建H5网页H5网页小程序

总结：各有用途，看需要做什么。
rem浏览器兼容性：
IE9以上等支持CSS3的浏览器是肯定的可以支持的，如果想要兼容IE低版本，那可以考虑针对IE9以下低版本浏览器，用px来实现
1rem = 16px
1px = 2rpx

np918
关注
专栏目录
css基于媒体查询和 rem 的响应式布局实践
09-22
CSS3为解决这一问题提供了强大的新工具，即媒体查询和rem单位，使我们能够构建出更加灵活和可维护的响应式布局。 媒体查询（Media Queries）允许我们根据不同的媒体条件，比如视口宽度（viewport width）或设备方向...
10-CSS-rem适配布局
...
03-13 3895
思考1. 页面布局文字能否随着屏幕大小变化而变化？2. 流式布局和flex布局主要针对于宽度布局，那高度如何设置？3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？
移动web开发之rem布局和less的相关
zh_hunan的博客
11-04 384
rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。 媒体查询 什么是媒体查询 媒体查询（Media Query）是CSS3新语法。 使用 @media查询，可以针对不同的媒体类型定义不同...
CSS 中玩转 rem：尺寸单位笑着用！
最新发布
qq_44996048的博客
10-14 883
CSS 是前端的魔法棒，但光有样式还不够，尺寸单位也是个绕不过的坎！今天我们来聊聊 rem，这个前端圈的“真大哥”，如何在布局中实现灵活的响应式设计。
CSS之轻松实现rem适配
https://shixuebin.gitee.io/hexo-blog/
07-05 1178
1. vs Code安装 px to rem & rpx (cssrem) 2. 修改扩展 root font size 我这里是按照 设计稿 750px 3. 添加 rem.js (function flexible (window, document) { var docEl = document.documentElement // 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。 var dpr = window.devicePixelRatio || 1
Rem：简介和基本使用
程序员无羡的博客
03-18 1020
Rem：简介和基本使用
CSS3 px 和 em 和 rem
08-14
本文将深入探讨CSS3中的单位px、em和rem，它们都是用来定义元素尺寸的重要工具，但各有其特点和应用场景。 首先，我们要理解像素（px）单位。像素是屏幕上的最小显示单位，通常用于创建精确的布局。当你设置一个...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
浅谈pc端rem字体设置的问题
08-29
在PC端开发中，REM字体设置可以应用于各种场景，例如在内容框中显示的内容，我们可以使用REM单位来设置字体大小，以确保内容在不同大小的屏幕上显示效果保持一致。 4、REM字体设置在移动端的应用 在移动端开发中，...
浅析rem和em和px vh vw和% 移动端长度单位
12-13
本文主要探讨了rem、em、px、vh、vw以及%这几种常见的长度单位，分析它们的特点与应用场景。 1. **px（像素）** - 像素是绝对单位，表示屏幕上的一个物理点。1px始终等于1个物理点，不会因设备或浏览器设置而改变...
了解和使用CSS中的rem单位，web前端开发资料
2401_84091993的博客
04-05 1037
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！.jpg" />
CSS -- 10. 移动WEB开发之rem布局
Qlz的博客
12-21 869
移动WEB开发之rem布局 1 rem基础 2 媒体查询 2.1 什么是媒体查询 2.2 语法规范 2.3 mediatype 查询类型 2.4 关键字 2.5 媒体特性 2.6 案例：根据页面宽度改变背景颜色 2.7 媒体查询+rem实现元素动态大小变化 2.8 针对不同的屏幕尺寸引入不同的样式文件 3 Less基础 3.1 维护css的弊端 3.2 Less介绍 3.3 Less的变量 3.4 Less的编译 3.5 Less的嵌套 3.6 Less的运算 4 rem适配方案 4.1 rem实际开发适配
CSS相对定位3大应用场景5个实战应用案例详解
艾编程带你学前端博客
12-09 444
我发现，作为学习Web前端开发的同学最大的痛苦莫过于，学了一堆知识，但到了实际的应用开发中不知道如何灵活运用。今天决定再上一干货，一个个来讲清楚关于定位系列实际应用场景，先从相对定位position: relative;开始相对定位3大应用场景：微调元素位置、提升元素层级、作为绝对定位元素参考对象相对定位5个应用案例：搜索框、图文对齐、滑动动画、弹性菜单、柱形图正在上传…重新上传取消定位作为css中非常重要的一个知识点，在实际开发中那就像家常菜一样，时时都会出现，同时在面试中也是200%会被问到的。
谈一谈rem的应用场景及其如何使用
u010227042的博客
06-09 2305
rem rem是什么 相信大多数同学都写过移动端，那么对rem就很熟悉了，它是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们 前端常说的适配单位rem。 认识rem 当浏览器解析HTML文档时，创建了一个用来代表页面元素的集合，叫做DOM（文档对象模型，Document Object Model）。树状结构，每一个节点代表一个元素。<html>就是顶层节点（根节点），在下面的是它的子节点<head>和<body..
了解和使用CSS中的rem单位
2401_84091468的博客
04-13 851
将模块保留在rem单位中，将元素保留在模块中，将它们保留为em。这种方法使操作全局大小变得更容易，它可以缩放模块中的类型，而模块内容是根据模块字体大小本身来缩放的。当时，较旧版本的IE仍占有较大的市场份额，因此无法缩放带有像素大小的文本。代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！但是，关于rem和em单位用作媒体查询单位时，有一个有趣的细节：它们始终保持相同的值1rem = 1em =浏览器设置的字体大小。
rem,em,vw,vh,vm的区别
m0_51181022的博客
04-17 1145
rem、em、vw、vh、vm都是相对单位，相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。它们之间的区别是什么呢？
CSS 【详解】响应式布局（含 rem 详解）
朝阳39的博客
03-02 8400
为什么 rem 能用于实现响应式布局？ px 绝对长度单位，不同客户端表现都相同，不具有响应式 em 相对长度单位，相对于父元素的 font-size 值，不同元素的父元素的尺寸各不相同，没有统一标准。 rem 相对长度单位，相对于根元素的 font-size 值，页面中的根元素只有一个（即 html 标签），标准统一，可用于响应式布局。 <!DOCTYPE html> <html lang="en"> <head> <meta cha
css单位rem用法
lianflower的博客
09-01 757
【代码】css单位rem用法。
css单位中px和em、rem
07-12
在CSS中，有几种常见的单位用于指定尺寸和距离。其中包括像素（px）、em和rem。下面是它们的解释： 1. 像素（px）：像素是最常用的单位，它指定了元素在屏幕上的精确尺寸。1px 等于屏幕上的一个物理像素。 例如：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值