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

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

是不是当你接触到 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布局的网站,你就会发现&#x

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 HTML 中使用 postcss-pxtorem 实现自适应屏幕的步骤如下: 1. 安装 postcss-pxtorem 插件: 可以使用 npm 安装:`npm install postcss-pxtorem --save-dev` 2. 在项目中创建 postcss.config.js 文件: 在项目根目录下新建一个 postcss.config.js 文件,用于配置 postcss-pxtorem 插件。 ```javascript module.exports = { plugins: { "postcss-pxtorem": { rootValue: 16, // 根字体大小,16px 为默认值 propList: ["*"] // 需要转换的 CSS 属性,默认为 ['*'] } } }; ``` 3. 在项目中安装并使用 postcss-loader: postcss-loader 可以帮助我们在构建项目时自动运行 postcss 插件。 可以使用 npm 安装:`npm install postcss-loader --save-dev` 在 webpack 配置文件中添加 postcss-loader: ```javascript module.exports = { module: { rules: [ { test: /\.css$/, use: [ "style-loader", "css-loader", { loader: "postcss-loader", options: { ident: "postcss", plugins: [require("postcss-pxtorem")()] } } ] } ] } }; ``` 4. 在 CSS 中使用 px 单位编写样式: 在 CSS 中使用 px 单位编写样式,postcss-pxtorem 插件会自动将其转换为 rem 单位。 例如,假设设计稿中某个元素的宽度为 100px,那么在 CSS 中可以这样写: ```css .box { width: 100px; } ``` 在 postcss-pxtorem 插件的转换下,该样式会被转换为: ```css .box { width: 6.25rem; /* 假设根字体大小为 16px */ } ``` 通过以上步骤,就可以在 HTML 中使用 postcss-pxtorem 实现自适应屏幕了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值