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

最新推荐文章于 2024-06-26 21:58:53 发布
原创 最新推荐文章于 2024-06-26 21:58:53 发布 · 1k 阅读 · 1
本文介绍了如何使用NPM和Webpack搭建前端开发环境，结合amfe-flexible和postcss-pxtorem实现HTML页面在不同屏幕尺寸下的自适应。通过安装和配置这两个工具，可以将px单位自动转换为rem，确保页面样式在不同设备上的适配性。

由于项目拓展需要开发一些独立的页面，为了提升开发效率，所以搭建了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 'amfe-
标签
#前端 #webpack #npm
最低0.47元/天 解锁文章
TI TPIC7710EVM评估模块实战指南：从硬件解析到软件调试
最新发布
weixin_33736832的博客
06-28 368
在汽车电子和工业控制领域，电机驱动是核心基础技术，其性能直接关系到系统的可靠性与安全性。电机驱动芯片通过集成功率MOSFET、电流检测、保护电路和通信接口，实现了对电机的精确控制与状态监控。其技术价值在于将复杂的模拟功率电路与数字逻辑控制高度集成，显著提升了系统的功率密度、响应速度和可靠性，同时简化了外围设计。这类芯片广泛应用于汽车电子驻车制动（EPB）、电动助力转向、工业自动化等对安全性和实时性要求极高的场景。本文聚焦于德州仪器（TI）的TPIC7710专用电机驱动芯片及其官方评估模块（EVM），深入剖析
postcss-html：用于解析HTML（和类似HTML）的PostCSS语法
02-04
PostCSS HTML语法 用于解析HTML（和类似HTML）的语法 入门 首先，安装模块： npm install postcss-syntax postcss-html --save-dev 如果要支持SCSS / SASS / LESS / SugarSS语法，则需要安装相应的模块。 SCSS： SASS： ： 糖SS： 用例 const postcss = require ( 'postcss' ) ; const syntax = require ( 'postcss-html' ) ( { // syntax for parse scss (non-required
移动端适配 rem、postcss-pxtorem、postcss-px-to-viewport、vw vh
徐___L
03-16 5042
移动端适配 rem、postcss-pxtorem、postcss-px-to-viewport、vw vh
html-postcss:使用PostCSS处理HTML中的内联CSS
05-17
html-postcss 使用PostCSS在HTML中的<style>标记和内联style=属性中处理CSS。 用法 var HTMLPostCSS = require ( 'html-postcss' ) ; var processor = new HTMLPostCSS ( plugins ) ; processor . process ( htmlString , cheerioOpts , postcssOpts ) ; //=> '<html>...</html>'
CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem（适用于 Webpack）
前端技术
06-09 1万+
项目对应的webpack以谷歌为例，F12 打开“开发者工具”，页面会出现如上分辨率选择最下一行的 “修改…”打开“修改…”对话框，添加自定义设备… ，注意选择Desktop，最后保存就能切换了。
用pxtorem给react做pc端适配
2302_77455710的博客
06-26 547
生而有崖而学无涯导言：pxtorem是一个插件，看这个插件的字面意思是把px变成rem,而我们要了解一下什么是rem？rem是根元素字体的单位，比如，1rem相当于16px。不仅仅可以给字体用，其他px单位的都可以用。
webpack入门
鹿杖客的博客
06-14 308
webpack已经出来很久了，以前就接触过，但是没有系统的学习，现在已经有了webpack2，本文基于webpack1，下面是段webpack的基本代码//一个常见的Webpack配置文件 var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextP
html文件使用postcss-pxtorem适配移动端 && 使用tailwindcss库
xxx
06-05 1522
package.json文件。
学post html js css,PostCSS真的太好用了！
weixin_30596151的博客
06-20 482
在PostCSS官网有着这样的对PostCSS特性介绍，箭头后面是对应功能的插件及其github地址。increase code readability → AutoprefixerUse tomorrow's CSS ,today! → postcss-cssnextThe end of global CSS → postcss-modulesAvoid errors in your CSS →...
vue项目中 postcss-pxtorem 的使用及webpack中的配置
A_one2010的博客
08-06 1万+
移动盛行的时代，越来越多的手机型号要求我们在制作嵌入h5的时候去适配不同的手机。适配有多重模式，就像布局有flex、百分比等。字体大小的控制也有px、百分比、rem等单位，这篇文章来回顾下webpack中关于px转rem。 1 安装依赖包   npm install postcss-pxtorem --save-dev 2 创建 .postcss.js文件，做webpack相关配置 配置...
移动框架适配使用插件 postcss-pxtrem，postcss-px-to-viewport ，修改webpack
qq_42359718的博客
01-27 1388
适配方案： 一、 动态设置根元素font-size 、DOM 元素rem 实现方式： 1、 开发时使用rem 2、 开发时使用px、修改配置文件 使用postcss-pxtorem 将PX 转 rem， 实现适配 步骤： 安装：npm install postcss-pxtorem --save-dev 修改：webnpack.config.js require('postcss-pxtorem')({ rootValue: 10, //结果为：设计稿元素尺
rem适配移动端
Tfishupupup的博客
11-08 934
新建文件rem.js或者直接在index.html中写在script标签里面。
vue-移动端适配-postcss-pxtorem
qq2276031的博客
11-30 2064
vue-移动端适配-postcss-pxtorem 安装lib-flexible npm i lib-flexible --save 在main.js引入lib-flexible import 'lib-flexible/flexible' 安装postcss-pxtorem npm install postcss-pxtorem -D 配置postcss-pxtorem 在根目录的.postcssrc.js文件中修改 此文件自动生成，若没有，手动添加 module.exports
前端自适应postcss-pxtorem使用介绍
qq_16874501的博客
01-04 1733
安装插件 yarn add lib-flexible postcss-px2rem 在 public 中的 index.html 中删除 meta 标签 flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。 在 src / main.js 中导入插件包 // 导入 rem 的 js, 动态的设置了, 不同屏幕的html根元素的 font-si..
vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别
weixin_30758821的博客
01-26 893
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机。适配有多重模式，有flex、百分比等。字体大小的控制也有px、百分比、rem等单位，webpack中 px转rem。 vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别 1 安装依赖包 npm installpostcss-pxtorem --save-dev 2 创建 ...
移动端适配rem方案、postcss-pxtorem+css中二倍图，三倍图的使用、uniapp 设计稿px处理为rpx
热门推荐
muzidigbig的博客
04-24 1万+
做移动端的适配我们就是要考虑，对于不同大小的手机屏幕，怎么动态改变页面布局中所有盒子的宽度高度、字体大小等。这个问题我们可以使用相对单位rem指相对于根元素的字体大小的单位。设置html的 font-size 属性，rem 是根据它的大小来动态变化整个项目中使用 rem 单位的元素大小。 uniapp 单位rpx ，设计稿尺寸px处理方式 postcss-pxtorem对内联样式、Echarts postcss-pxtorem的弊端 uniapp 设计稿px处理为rpx px与rpx的关系
关于vue利用postcss-pxtorem进行移动端适配的问题及关于PostCss的理解
細水、長流√的专栏
06-01 1683
刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功，后来经过自己不断尝试之后终于成功了。稍微坐下总结：1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置，而不要用webpack-simple，因为webpack里面很多插件加载器之类的都是给你预配好的，这样在项目构建中就不会遗漏什么。2.cnpm install postcss-pxtorem -D安装postcss-pxtorem，此插件如果你用的是webpack的话只要进行安装
前端规范(三)之stylelint
weixin_42424283的博客
01-31 4980
stylelint 用来检查样式文件 css less sass 等是否符合规范。
移动端rem适配布局：Vue+amfe-flexible+postcss-pxtorem
weixin_43932309的博客
06-17 3062
移动端rem适配布局：Vue+amfe-flexible+postcss-pxtorem 一文技能全get，顺便填坑...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值