基于NPM和webpack的HTML页面开发——amfe-flexible postcss-pxtorem页面自适应

最新推荐文章于 2024-06-05 14:15:00 发布
最新推荐文章于 2024-06-05 14:15:00 发布
阅读量922 收藏 1
点赞数
分类专栏： 前端 # 脚手架 # Sass 文章标签： 前端 webpack npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sayUonly/article/details/108710772
版权
由于项目拓展需要开发一些独立的页面，为了提升开发效率，所以搭建了NPM开发环境。amfe-flexible和postcss-pxtorem之前在Vue项目中经常使用。目的是不同大小屏幕下的页面自适应。这里我将这个方法引入到我的单个HTML页面开发中。这个文章是我个人开发的一个良好实践，基于我之前做的一个html开发模板html-template进行拓展的。安装首先安装重要的插件。amfe-flexible是用来计算根font-size。postcss-pxtorem是将css中的px单位转换为re
摘要由CSDN通过智能技术生成

由于项目拓展需要开发一些独立的页面，为了提升开发效率，所以搭建了NPM开发环境。amfe-flexible和postcss-pxtorem之前在Vue项目中经常使用。目的是不同大小屏幕下的页面自适应。这里我将这个方法引入到我的单个HTML页面开发中。

这个文章是我个人开发的一个良好实践，基于我之前做的一个html开发模板html-template进行拓展的。

安装

首先安装重要的插件。

amfe-flexible是用来计算根font-size。

postcss-pxtorem是将css中的px单位转换为rem。

npm i amfe-flexible postcss-pxtorem -D

配置

amfe-flexible

amfe-flexible引入需要页面的index.js。

import
最低0.47元/天 解锁文章
acgCode
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vite3+vue3 postcss-pxtorem 实现css自适应设备（px转rem）
placebo1996的博客
11-13 1639
最近新开一个项目是做公司前台的大屏展示，但我不知道屏幕的尺寸，所以考虑使用自适应css，这样只需要知道设计稿宽度就能适配任意尺寸的屏幕，达到一个1：1还原的效果，前提是设计稿长宽比和屏幕长宽比相等。
CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem（适用于 Webpack）
前端技术
06-09 7457
项目对应的webpack以谷歌为例，F12 打开“开发者工具”，页面会出现如上分辨率选择最下一行的 “修改…”打开“修改…”对话框，添加自定义设备… ，注意选择Desktop，最后保存就能切换了。
html文件使用postcss-pxtorem适配移动端 && 使用tailwindcss库
最新发布
xxx
06-05 497
package.json文件。
vue自适应postcss-pxtorem + amfe-flexible
l_____z______z的博客
12-05 560
vue webpack、vite配置自适应postcss-pxtorem + amfe-flexible
Vuecli3使用postcss-pxtorem+amfe-flexible适配移动端
Welcome To My Home
12-10 1223
在最近的项目开发中，移动端自适应这个问题，让我开发很不顺畅，使用单独引入 lib-flexible。 CSS编写过程中，做起来很不方便，需要自己计算rem值，很是麻烦，有时候可能还算错了，导致设计稿还原度上很差！ 然后经过各类资源查找，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用 安装 postcss-pxtorem windo...
angular12 配合 postcss-pxtorem amfe-flexible 移动端适配
仙途路漫漫其修远兮
08-12 1315
1.安装必要依赖 npm i -D @angular-builders/custom-webpack npm install postcss-pxtorem --save-dev npm i -S amfe-flexible 2.创建webpack.config.js文件（文件夹跟angular.json同级） webpack.config.js module.exports = { module: { rules: [{ test: /\.scss$/, use: [
使用amfe-flexible实现自适应布局
Littlegirlha的博客
01-08 2082
amfe-flexible
移动端、后台管理、大屏可视化等项目rem适配（postcss-pxtorem、amfe-flexible）。已自测
Li_Wen_Zhong的博客
06-09 2977
移动端、后台管理、大屏可视化等项目rem适配（postcss-pxtorem、amfe-flexible）。已自测，可能会遇到的问题和解决办法也写到了里面
CSS自适应分辨率 postcss-pxtorem（适用于 Vite）
前端技术
01-25 1319
CSS自适应分辨率 postcss-pxtorem（适用于 Vite）
vue3+vite+ts自适应实现(postcss-pxtorem)
m0_71537867的博客
04-07 2079
自适应实现(postcss-pxtorem) 针对vue3+vite+ts、使用vue-cli和webpack的vue3、vue2项目 当pc端或移动端H5等项目中需要根据当前浏览器窗口或屏幕尺寸来自适应的改变页面内元素尺寸时，就可以借助下述插件和相关配置来实现。
关于vue利用postcss-pxtorem进行移动端适配的问题
10-15
主要介绍了关于vue利用postcss-pxtorem进行移动端适配的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
$ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位（观点）。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。此脚本将从您选择的允许浏览器设置字体大小的属性中将每个px...
vue3.0中使用postcss-pxtorem的具体方法
10-15
`postcss-pxtorem`是一个PostCSS插件，它的主要任务就是自动化这个转换过程，使得开发人员可以按照设计稿的尺寸直接编写CSS，而无需手动计算rem值。 首先，要使用`postcss-pxtorem`，你需要在项目中安装它。如果你...
postcss-pxtorem:px转rem，基于postcss
05-09
postcss-pxtorem 移动端px to rem 例如设计师给出640px的设计稿，写css样式的时候，就按照640px切图，单位px。 完工后，js或者css媒体查询，设定1rem的值。例如1rem == 40px。那么我们只 需要把css文件里面的px换算...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
本文将详细介绍如何使用Vue CLI3进行移动端适配，主要涉及两种方法：`lib-flexible` 和 `postcss-plugin-px2rem`。 首先，确保你的项目是基于Vue CLI3或更高版本。移动端适配的主要目标是解决不同设备屏幕尺寸下的...
element-plus的自动导入和按需导入
热门推荐
sayUonly的博客
11-02 1万+
element-plus根据官网文档，推荐用户采用按需导入的方式进行导入。 我的项目是使用vite进行构建的，根据官网的文档，利用unplugin-vue-components插件进行自动按需导入。 当我们使用element的标签时，无需再使用import对组件进行导入。 例如： <el-button>test</el-button> 会自动引入ElButton组件。 不过当我们想要使用命令的方式创建element组件时，样式会无法自动引入。 我们以ElMessage为例。 im
element-plus主题配置
sayUonly的博客
03-16 8231
element-plus主题配置 先上官网：主题 本篇文章会讲述，我是如何根据官方教程进行element-plus的主题配置的，以及遇到的坑，和坑的解决方法。 首先，我们需要创建自己的主题文件，/src/styles/element.scss（文件名随意） 根据官网，调整我们的主题： @forward "element-plus/theme-chalk/src/common/var.scss" with ( $colors: ( 'primary': ('base': #3A9BFF) ),
typescript + vite 项目如何配置别名
sayUonly的博客
02-18 6408
我们为了省略冗长的路径，经常喜欢配置路径别名。但是在typescript下会遇到一些坑，比如导入路径不能以“.ts”扩展名结束，路径不识别等。下面我记录了我的处理方法。 vite.config.js： export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, 'src') // 配置别名 } } }) 配置完之后，就可以在ide中使用别名了。但是这个时候我发现，路径下面报
amfe-flexible和postcss-px-to-viewport如何配合使用
05-01
npm install amfe-flexible postcss-px-to-viewport --save-dev ``` 2. 在项目的入口文件中引入amfe-flexible： ```javascript import 'amfe-flexible'; ``` 3. 在项目的构建工具中配置postcss-px-to-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值