jsp使用rem页面内容不能根据屏幕分辨率自适应_为什么很多web项目还是使用 px,而不是 rem?...

本文探讨了rem布局在实现屏幕自适应时的问题,指出rem可能导致大屏幕用户体验不佳,推荐使用vw/vh等单位。同时澄清了px单位的误解,解释了在高分屏和移动端中px的含义,建议项目中综合使用多种布局方案和px单位以实现更好的适配效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

是不是当你接触到 rem 的时候,感觉 rem 很强大。但是自己接触到的公司项目全部都使用 px,是不是心里有一万个为什么?想知道吗?是你的公司技术更新落后了吗?

bc4a7495b80dae92f0eab09b221faea0.png

有这个疑问的小朋友,如果我没猜错的话,可以肯定你不了解px,且心里肯定认为rem比px好。

如果真是这样,那我们就得好好说说这个问题了。

首先得先弄懂什么是px什么是rem?

现实中真的有太多的人在正在使用rem布局,但他们却没搞懂什么是rem,以及为什么要使用rem?

大部分人使用rem只是因为省事,能自适应屏幕,甚至有大量的rem布局解决方案(如:flexible等)和编辑器插件(如:px-to-rem等),你只要输入一个基准值,工具就可能自动帮你转成rem单位,所以网上很多人都批评rem布局是一个偷懒的做法。rem布局是根据设备分辨率和dpr不同动态设置html字体大小来实现自适应布局的一种做法,是一个等比缩放方案,也就是会根据屏幕大小自动缩放大小以达到自适应效果,也就是说采用rem布局的网站,屏幕越大看到的内容越大,反之屏幕越小看到的内容也就越小。但如果你尝试用不同大小的屏幕访问rem布局的网站,你就会发现,手机端还好,pad访问感觉是在用老人机,PC端访问惨不忍睹,大屏幕和小屏幕看的内容是一样的,屏幕越大内容越大,很显然不合理,我们用大尺寸屏幕为的是看到更多的内容,而不是更大的内容。

c8eff85bfeaa303f143de03fc6ab4092.png

所以这样的自适应用户体验其实很不好,并不推荐使用。

如果非要在小范围内使用等比缩放的布局,其实vx,vxxx方案比rem更优,至于为什么很少人使用,以前是因为其兼容性问题,但其实现在大部分浏览器都已经对vw,vh,vmin,vmax进行了支持,所以rem应该可以退出历史舞台了。再来说说px在PC端,很多人对px的理解还停留在以前的PC时代,觉得px是一个固定单位(也就是**物理像素**),在普通分辨率的屏幕下没什么问题,但随着高分屏的出现你再观察一下,在css中设置1px是否还等于1个物理像素,很显然不是,在css中设置的px单位,其实指的是**逻辑像素**,一个由系统或软件为了屏幕显示效果而自动缩放得到的一个抽象尺寸。在普通的屏幕上逻辑像素是等于物理像素的,但在高分屏下,px等于缩放后的尺寸。在移动端,与PC有一定的区别,为了承载和显示更大的页面,引入了viewport的概念,在css中设置的px并不是逻辑像素,而是**viewport像素**,一个移动端浏览器内部对逻辑像素进行再处理的结果,但只要我们设置

<mate name="viewport" content="width=device-width"/>

这句话其实就是让逻辑像素等于viewport像素,我们在css中使用px单位其实就是逻辑像素,上面说过,逻辑像素是缩放后的尺寸,已经具备了适应了各中屏幕的效果,所以在项目只需要px就行,没必要也不应该使用已经过时的rem布局最后再说一句,一个优秀的适配方案,不可能单纯地使用某一种布局方案,如flex布局, 百分比布局,vx与vxxx布局、媒体查询等,而是综合使用它们,配合px单位才能达到真正的适配效果。

facf818e92a1c9e1cb266e98c0ff4b9e.png

`postcss-px2rem`是一个PostCSS插件,用于将像素单位(px)转换为响应式REM单位,有助于提高网站在不同分辨率设备上的可读性和自适应性。为了实现在1366x768分辨率屏幕的兼容性适配,你需要按照以下步骤操作: 1. **安装插件**: 首先,在项目目录下通过npm或yarn安装`postcss-px2rem`插件: ```bash npm install postcss-px2rem autoprefixer --save-dev # 或者 yarn add postcss-px2rem autoprefixer --dev ``` 还需要安装一个处理媒体查询的插件如`autoprefixer`,以防未来浏览器需求变化。 2. **配置插件**: 在`postcss.config.js`或`.postcssrc.js`文件中配置postcss-px2rem,设置基础字体大小(一般选择根元素的font-size)以及视口宽度对应的rem值。例如,对于1366x768分辨率,你可以设置为: ```javascript module.exports = { plugins: [ require('postcss-px2rem')({ rootValue: 100, // 假设基础字体大小是100px unitPrecision: 5, // 精度,默认是5位小数 propList: ['*'], // 转换所有属性,如果只针对某些特定属性则可以指定数组 viewportWidth: 1366, // 视口宽度,单位为px remUnit: 'vw', // 使用viewport宽度单位作为基准,也可以是百分比或其他 }), require('autoprefixer')({ browsers: ['last 2 versions'] }) // 添加媒体查询支持 ] }; ``` 3. **应用到CSS**: 现在,所有的px单位都会被转换为基于视口宽度的rem单位。当你需要针对1366x768分辨率编写样式时,可以直接使用rem,它会自动适应这个视口尺寸。 4. **测试适配**: 编译并部署你的项目,然后在1366x768的浏览器窗口中检查布局和字体大小是否合适。如有必要,可以在媒体查询中进一步调整特定设备的样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值