news 2026/8/29 6:57:45

rem /em/vw /vh/px 单位区别与选型

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
rem /em/vw /vh/px 单位区别与选型

1. px 像素

绝对单位,固定不变;适合边框、小图标、固定尺寸


2. em 相对父级字体

相对于父元素 font-size,嵌套容易叠加混乱,不推荐用于整体适配。


3. rem 相对根字体

相对于 html 根字体大小,移动端主流适配方案,全局统一、可控。


4. vw / vh 视口单位

  • vw:视口宽度 1%,100vw = 全屏宽

  • vh:视口高度 1%,100vh = 全屏高

优势:无需JS、纯CSS适配,现代项目首选。


5. 选型总结

  • 固定尺寸:px

  • 移动端适配:rem / vw

  • 全屏比例布局:vw/vh

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/29 6:57:42

CSS 三大样式引入方式、样式冲突解决方案

1. 三种引入方式行内样式:style 属性,权重最高,不利于维护内部样式:style 标签,当前页面生效外部样式:link 引入 css 文件,项目标准规范2. 样式冲突解决权重高覆盖权重低权重相同,后…

作者头像 李华
网站建设 2026/8/29 6:57:38

伪类与伪元素区别、常用伪类场景汇总

1. 核心区别伪类(:):选中元素的状态,不生成新标签,如 hover、active、focus伪元素(::):创建虚拟DOM元素,相当于新增标签,如 before、after2. 常用伪类链接&am…

作者头像 李华
网站建设 2026/8/29 6:56:20

网易2018校招机器学习算法工程师笔试题解析与备考指南

每年到了校招季,总有很多同学在牛客网、知乎上翻旧题,而网易2018校园招聘机器学习算法工程师这套笔试卷,算是当年流传度极高、讨论量也很大的一套题。我自己当年也刷过,后来参与过校招笔试出题和面试,再看这套卷子&…

作者头像 李华
网站建设 2026/8/29 6:55:30

开源350万提示词背后:AI电影级生成的工作流与一致性控制

第一次看到这个开源项目的时候,我的第一反应不是兴奋,而是怀疑。标题里写着“价值 350 万的提示词开源了”,还牵扯到“全球首部全 AI 生成的电影长片”。做过 AI 生成内容的人会有种本能警觉:这个词条更像是营销组合,而…

作者头像 李华
网站建设 2026/8/29 6:54:14

给Agent项目选了强化学习,训练三周不收敛——我补上AI入门才搞清问题类型

给Agent项目选了强化学习,训练三周不收敛--我补上AI入门才搞清问题类型 项目启动会上我拍胸脯说用强化学习搞定客服 Agent,结果训练三周,奖励曲线像心电图一样乱跳,业务方黑着脸让我解释。直到翻出 AI入门 课程里那张「问题类型决策树」,我才意识到从一开始就选错了学习范式--…

作者头像 李华