rem自适应解决方案·px2rem-loader&hotcss

最新推荐文章于 2024-06-29 23:11:25 发布
转载 最新推荐文章于 2024-06-29 23:11:25 发布 · 194 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5ad9a694f265da0b7a203f9b

本文介绍了一种利用px2rem-loader与hotcss.js实现一套代码多终端自适应的方法。通过这种方式，仅需一套设计稿即可使网页在不同尺寸屏幕上保持相同的比例显示，简化了前端开发流程。

设计师一般只提供一套尺寸的设计稿，如何实现一套代码实现多端自适应？

效果演示

假设一份宽度为640px(iphone5)的设计稿，一个元素宽度为:320px，通过px2rem-loader&hotcss.js实现代码只有width: 320px，就实现在任何尺寸的屏幕下都占屏幕的1/2。

width: 320px;
height: 320px;
复制代码

上图可以看出，通过px2rem-loader自动将320px转化为8rem。

width: 8rem;
复制代码

而hotcss.js则在html标签中添加了

<html lang="en" data-dpr="2" max-width="540" style="font-size: 40px;">
复制代码

在head标签中添加了

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
复制代码

当尺寸换为iphone6时，可以看到宽度依然为8rem，而实际尺寸则变为375px。

配置

安装px2rem-loader

npm i px2rem-loader

在style-loader、css-loader后使用px2rem-loader。

{
    loader: 'px2rem-loader',
    options: {
        remUnit: 40,
        remPrecision: 8
    }
}
复制代码

通过script标签或import等方式引入hotcss.js，尽量靠前引入。

总结

通过这样的方式，只需要一套代码，就可以实现多终端自适应，而css数值可以与设计稿保持一致。

转载于:https://juejin.im/post/5ad9a694f265da0b7a203f9b

pc端不同分辨率适配
qq_24343389的博客
08-17 1万+
1、以1920* 1080的设计稿为例，实现PC端不同分辨率适配 2、安装依赖 npm install --save lib-flexible 或者 yarn addlib-flexible -save npm installpx2rem-loader -D或者 yarn addpx2rem-loader npm 安装不上时可以用cnpm 3、在utils文件下新建 一个 js 文件 如viewport.js 代码如下 (function() { va...
基于vue-cli配置移动端自适应—淘宝弹性布局方案lib-flexible和px2rem-loader实践（750px设计稿）
人间草木
01-18 2360
在vue中引入lib-flexible 首先你要确保vue环境搭建成功 配置 flexible 第一步： 安装 lib-flexible， npm install lib-flexible --save 第二步： 引入 lib-flexible 在项目入口文件 main.js 里 引入 lib-flexible import Vue from ...
px2rem-loader（Vue:将px转化为rem，适配移动端）
03-08 400
转载：https://www.cnblogs.com/WQLong/p/7798822.html 1.下载lib-flexible 使用的是vue-cli+webpack，通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible...
px2rem-loader:px2rem CSS文件的Webpack加载器
05-13
px2rem-loader 一装载机 安装 npm install px2rem-loader webpack配置 module.exports = { // ... module: { rules: [{ test: /\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'px2rem-loader', // options here options: { remUnit: 75, remPrecision: 8 } }] }] } } 有关的查询参数的更多
px2rem-loader
最新发布
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
06-29 987
px2rem-loader
px2rem-loader（Vue:移动端自适应，px自动转化）
yusun1234的博客
09-17 5351
1.下载lib-flexible npm i lib-flexible --save 2.引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4.安装px2rem-loader npm install px2rem-loader 5.配置px2rem-loader 在b
px、rem转换工具 grunt-px2rem-master
02-04
`grunt-px2rem`是一个Grunt插件，专门用于批量处理CSS文件，将其中的px单位转换为rem，以适应移动优先的布局策略。`grunt-px2rem-master`则是这个插件的主分支或最新版本的压缩包。 **一、px与rem单位** 1. **px...
vue移动端h5适配解决方案(lib-flexible+px2rem-loader)
光
06-21 3889
先介绍用到的两个工具： px2rem-loader：将css中的px转为rem单位，用了它就不用自己计算rem值了 lib-flexible：根据设备宽度，修改根元素html的font-size，以适配不同终端 配置 安装1：npm i px2rem-loader --save -dev 安装2：npm i lib-flexible --save 配置： build/utils....
手把手教你vue-cli3搭建项目实现移动端自适应----- flexible和 postcss-px2rem
面对疾风吧
08-17 8967
1、安装 flexible和 postcss-px2rem 按照我说的一步一步去做，保证可以完成哦！有图有代码，简单明了可复制！ 如果能帮助到你，还望能给个赞+关注，鼓励一下！谢谢！ npm i lib-flexible postcss-px2rem --save flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-sc.........
基于vue-cli配置lib-flexible + rem实现移动端自适应
08-28
* 对于外部引入的CSS文件，px2rem-loader可能不能正常转换，这是因为px2rem-loader只能转换内部引入的CSS文件。 五、结论 基于Vue-CLI配置Lib-Flexible + Rem可以实现移动端自适应，提供了一个灵活的响应式设计...
px2rem-loader将px转化为rem，适配移动端vant-UI等框架
Songywaa的博客
08-13 2025
简单描述 最近尝试了几个移动端的ui框架，发现vant-ui还不错； 但是有个问题，就是vant-ui单位是px，使用时需要我们自己去转换为rem； 具体实现方法 1.下载lib-flexible 使用的是vue-cli+webpack，通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible i...
移动端适配插件——px2rem-loader
weixin_44314609的博客
11-09 1097
安装 npm i lib-flexible --save 引入 // main.js import 'lib-flexible' 安装插件 npm i px2rem-loader --save-dev 配置方法一、 在vue-cli3的项目中，找到node_modules/@vue/cli-service/lib/config/css.js，加入代码 rule .use('px2rem-loader') .loader('
前端学习之路之SPA(单页应用)设计原理
weixin_34413065的博客
03-22 180
SPA设计 1、设计意义 前后端分离 减轻服务器压力 增强用户体验 Prerender预渲染优化SEO 前后端分离：前端做业务逻辑，后端处理数据和接口，耦合度减少，开发效率提高。 减轻服务器压力: 一个页面不用每次都去请服务端，当一个应用较复杂，有10多个页面的时候，那么每个用用户操作几个页面，只需要请求一次，这会在很大程度上减轻服务器压力。 增强用户体验: 比如说当从一个首页...
px2rem-loader 注意事项
weixin_44446223的博客
01-28 519
在px后面添加/no/，不会转化px，会原样输出。 height: 32px!important; /*no*/
webpack之css自动转rem(px2rem-loader)
scorpio的世界
06-17 3545
主要是使用 px2rem-loader 插件配合lib-flexible来实现 1、安装px2rem-loader npm i px2rem-loader -D 2、配置px2rem-loader { loader: 'px2rem-loader', ...
px2rem-loader 适配
weixin_44969441的博客
06-01 2879
px2rem-loader（Vue:将px转化为rem，适配移动端） 使用的是vue-cli+webpack，通过npm来安装的 npm i lib-flexible --save 在main.js中引入lib-flexible import ‘lib-flexible/flexible’ 通过meta标签，设置设备宽度以及缩放比例 meta name="viewport" content="width=device-width, initial- scale=1.0" 安装px2rem-loa
css hot loader,rem自适应解决方案·px2rem-loader&hotcss
weixin_34157892的博客
08-03 238
设计师一般只提供一套尺寸的设计稿，如何实现一套代码实现多端自适应？效果演示假设一份宽度为640px(iphone5)的设计稿，一个元素宽度为:320px，通过px2rem-loader&hotcss.js实现代码只有width: 320px，就实现在任何尺寸的屏幕下都占屏幕的1/2。width: 320px;height: 320px;上图可以看出，通过px2rem-loader自动将32...
px2rem-loader：用于CSS文件的Webpack加载器
px2rem-loader 是一个专为 Webpack 构建工具设计的 CSS 处理加载器（loader），其核心功能是将 CSS 文件中的像素单位（px）自动转换为相对单位 rem，从而实现网页在不同设备屏幕下的自适应布局。这一技术广泛应用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值