基于postCSS手写postcss-px-to-vewiport插件实现移动端适配

置顶

琢鸣

于 2024-04-22 17:33:11 发布

阅读量1.3k

点赞数 20

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签： postcss 前端 javascript css

本文链接：https://blog.youkuaiyun.com/G_ing/article/details/138082124

本文介绍了如何在Vite和Vue3项目中集成并使用PostCSS的px-to-viewport插件，实现响应式设计，将px单位转换为vw，以适应不同屏幕尺寸。作者通过逐步示例展示了从创建项目、布局调整到编写并配置插件的整个过程。

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

🌟前言

目前前端实现移动端适配方案千千万，眼花缭乱各有有缺，但目前来说postcss-px-to-vewiport是一种非常合适的实现方案，postcss-px-to-vewiport是一个基于postCss开发的插件，其原理就是将项目中的px单位转换为vw(视口宽度)。对postCss不了解的朋友可以看看我的上篇文章postCss基本介绍。

🌟实现

本篇文章是使用vite + vue3 基于postCss来实现postcss-px-to-vewiport插件。

1.创建项目

使用vite创建

npm init vite@latest

使用vue脚手架创建

vue create projectname

选自己喜欢的方式创建就OK

2.简单布局

在公司项目开发中，UI会出设计图，会有一个设计稿的宽度，然后我们根据这个宽度去适配，假设我们现在设计稿的宽度是1280，那么我们写出下面的简单布局：

App.vue文件：

<template>
  <div class="page">
    <div class="left"></div>
    <div class="right">
      测试自适应
    </div>
  </div>
</template>

<style scoped>
.page{
  width: 1276px;
  height: 748px;
  display: flex;
  border: 2px red solid;

  .left{
    width: 600px;
    height: 300px;
    background-color: cadetblue;
  }