讲一下移动端适配：viewport、remem、设备像素比

[问答题]

讲一下移动端适配：viewport、rem/em、设备像素比与响应式方案。

秋木苏76

响应式方案：媒体查询（@media）、flex弹性布局设备像素比，是设备的物理像素和CSS像素即设计像素之间的比值，对于有些设备需要用2倍或者3倍图来做显示。 em是相对于父元素的字体大小； rem是相对于根元素的字体大小，一般是12px；

发表于 2026-03-13 16:15:09 回复(1)

已转码的钝角很开心

移动端适配的核心是让Web页面在不同尺寸和像素密度的设备上都能获得清晰，一致的视觉体验常常通过设置理想视口（viewport)开始，利用rem方案将css尺寸与根字体大小挂钩实现等比缩放，深刻理解设备像素比（DPR）对高清屏的影响，并结合响应式设计的媒体查询，共同打造出一套灵活健壮的UI方案

发表于 2026-02-24 14:27:05 回复(1)

秋水夏树

1. 放弃布局视口（默认980px后收缩，导致移动端的字看起来很小），采用理想视口，视口最大宽度为设备宽度，不会自动缩放 2. rem：相对根元素的字体大小 3. em：相对设置了字体大小的父元素字体大小 4. 媒体查询：多套代码

发表于 2025-09-16 02:20:10 回复(0)

提交观点

问题信息

来自：前端开发-牛客面经八股

难度：

3条回答 15收藏 514浏览

扫一扫，把题目装进口袋