refactor: ♻️ 修复原子化 css 移动端适配问题

在写原子化 css 的时候通过 unocss 的 presetRemToPx 预设它可以原子化默认 rem 转换成 px，最后再由 postcss 把 px 转成 vw，从而让我们无痛使用原子化css closed #6, #20
xiangshu233 · Feb 20, 2024 · 1e8f780 · 1e8f780
1 parent 05dcc6b
commit 1e8f780
Show file tree

Hide file tree

Showing 18 changed files with 80 additions and 70 deletions.
diff --git a/index.html b/index.html
@@ -38,7 +38,7 @@
           flex-direction: column;
         }
         .first-loading-wrap > h1 {
-          font-size: 128px;
+          font-size: 28px;
         }
         .first-loading-wrap .loading-wrap {
           padding: 98px;
@@ -51,14 +51,14 @@
           transform: rotate(45deg);
           position: relative;
           display: inline-block;
-          font-size: 52px;
-          width: 52px;
-          height: 52px;
+          font-size: 12px;
+          width: 30px;
+          height: 30px;
           box-sizing: border-box;
         }
         .dot i {
-          width: 24px;
-          height: 24px;
+          width: 14px;
+          height: 14px;
           position: absolute;
           display: block;
           background-color: #1890ff;

diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "@types/node": "^20.10.5",
     "@types/qs": "^6.9.11",
     "@unocss/eslint-plugin": "^0.58.4",
+    "@unocss/preset-rem-to-px": "^0.58.5",
     "@unocss/transformer-directives": "^0.58.4",
     "@unocss/transformer-variant-group": "^0.58.4",
     "@vitejs/plugin-vue": "^5.0.0",
@@ -98,12 +99,10 @@
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^1.8.27"
   },
-
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",
     "commit-msg": "npx --no-install commitlint --edit $1"
   },
-
   "lint-staged": {
     "*": "eslint --fix"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.js b/postcss.config.js
@@ -20,7 +20,7 @@ import viewport from 'postcss-mobile-forever'
 
 const baseViewportOpts = {
   appSelector: '#app', // 根元素选择器，用于设置桌面端和横屏时的居中样式
-  viewportWidth: 750, // 设计稿的视口宽度，可传递函数动态生成视图宽度
+  viewportWidth: 375, // 设计稿的视口宽度，可传递函数动态生成视图宽度
   unitPrecision: 3, // 单位转换后保留的精度（很多时候无法整除）
   maxDisplayWidth: 600, // 桌面端最大展示宽度
   propList: [
@@ -45,8 +45,8 @@ export default {
     autoprefixer(),
     viewport({
       ...baseViewportOpts,
-      // 只将 vant 转为 350 设计稿的 viewport，其它样式的视图宽度为 750
-      viewportWidth: file => (file.includes('node_modules/vant/') ? 375 : 750),
+      // 只将 vant 转为 375 设计稿的 viewport，其它样式的视图宽度为 750
+      // viewportWidth: file => (file.includes('node_modules/vant/') ? 375 : 750),
     }),
   ],
 }
diff --git a/src/styles/common.less b/src/styles/common.less
@@ -94,7 +94,7 @@ a:hover {
 }
 
 .xicon {
-  font-size: 42px;
+  font-size: 18px;
 
   svg {
     width: 100% !important;

diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
@@ -5,6 +5,7 @@
       <div class="text-darkBlue dark:text-garyWhite mb-4 mt-12 text-center text-2xl font-black">
         {{ title }}
       </div>
+
       <div class="mb-6 mt-4 w-full">
         <van-swipe class="h-30" :autoplay="3000" :indicator-color="designStore.appTheme">
           <van-swipe-item

diff --git a/src/views/login/ForgetPasswordForm.vue b/src/views/login/ForgetPasswordForm.vue
@@ -2,7 +2,7 @@
   <van-form v-if="getShow" ref="formRef" class="flex flex-col items-center" @submit="handleReset">
     <van-field
       v-model="formData.username"
-      class="enter-y mb-25px items-center !rounded-md"
+      class="enter-y mb-4 items-center !rounded-md"
       name="username"
       placeholder="用户名"
       :rules="getFormRules.username"
@@ -16,7 +16,7 @@
 
     <van-field
       v-model="formData.mobile"
-      class="enter-y mb-25px items-center !rounded-md"
+      class="enter-y mb-4 items-center !rounded-md"
       name="password"
       placeholder="手机号码"
       :rules="getFormRules.mobile"
@@ -30,7 +30,7 @@
 
     <van-field
       v-model="formData.sms"
-      class="enter-y mb-70px items-center !rounded-md"
+      class="enter-y mb-10 items-center !rounded-md"
       center
       clearable
       placeholder="请输入短信验证码"
@@ -47,9 +47,11 @@
         </van-button>
       </template>
     </van-field>
-
+    <van-button type="success">
+      成功按钮
+    </van-button>
     <van-button
-      class="enter-y !mb-25px !rounded-md"
+      class="enter-y !mb-4 !rounded-md"
       type="primary"
       block
       native-type="submit"
@@ -59,7 +61,7 @@
     </van-button>
 
     <van-button
-      class="enter-y !mb-150px !rounded-md"
+      class="enter-y !rounded-md"
       plain
       type="primary"
       block

diff --git a/src/views/login/LoginForm.vue b/src/views/login/LoginForm.vue
@@ -2,7 +2,7 @@
   <van-form v-if="getShow" ref="formRef" class="flex flex-col items-center" @submit="handleSubmit">
     <van-field
       v-model="formData.username"
-      class="enter-y mb-25px items-center !rounded-md"
+      class="enter-y mb-4 items-center !rounded-md"
       name="username"
       placeholder="用户名"
       :rules="getFormRules.username"
@@ -15,7 +15,7 @@
     </van-field>
     <van-field
       v-model="formData.password"
-      class="enter-y mb-25px items-center !rounded-md"
+      class="enter-y mb-4 items-center !rounded-md"
       :type="switchPassType ? 'password' : 'text'"
       name="password"
       placeholder="密码"
@@ -37,16 +37,16 @@
       </template>
     </van-field>
 
-    <div class="enter-y mb-100px w-full flex justify-between px-5px">
+    <div class="enter-y mb-10 w-full flex justify-between px-5px">
       <div class="flex items-center">
-        <van-switch v-model="rememberMe" class="mr-8px !text-30px" />
-        <span class="!text-25px">记住我</span>
+        <van-switch v-model="rememberMe" size="18px" class="mr-8px" />
+        <span>记住我</span>
       </div>
-      <a class="!text-25px" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">忘记密码?</a>
+      <a @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">忘记密码?</a>
     </div>
 
     <van-button
-      class="enter-y !mb-25px !rounded-md"
+      class="enter-y !mb-4 !rounded-md"
       type="primary"
       block
       native-type="submit"
@@ -55,7 +55,7 @@
       登 录
     </van-button>
     <van-button
-      class="enter-y !mb-25 !rounded-md"
+      class="enter-y !rounded-md"
       plain
       type="primary"
       block

diff --git a/src/views/login/LoginTitle.vue b/src/views/login/LoginTitle.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-col items-center justify-center">
-    <div class="logo enter-y my-35px">
-      <SvgIcon class="!h-250px !w-250px" name="logo" />
+    <div class="logo enter-y mb-2 mt-8">
+      <SvgIcon class="!h-30 !w-30" name="logo" />
     </div>
-    <div class="text-darkBlue dark:text-garyWhite enter-y mb-80px text-45px font-black">
+    <div class="text-darkBlue dark:text-garyWhite enter-y mb-8 text-2xl font-black">
       {{ title }}
     </div>
   </div>

diff --git a/src/views/login/RegisterForm.vue b/src/views/login/RegisterForm.vue
@@ -1,6 +1,6 @@
 <template>
   <van-form v-if="getShow" ref="formRef" class="flex flex-col" @submit="handleRegister">
-    <van-cell-group inset class="enter-y !mx-0 !mb-60px">
+    <van-cell-group inset class="enter-y !mx-0 !mb-10">
       <van-field
         v-model="formData.username"
         class="enter-y items-center !rounded-md"
@@ -111,7 +111,7 @@
     </van-cell-group>
 
     <van-button
-      class="enter-y !mb-25px !rounded-md"
+      class="enter-y !mb-4 !rounded-md"
       type="primary"
       block
       native-type="submit"
@@ -121,7 +121,7 @@
     </van-button>
 
     <van-button
-      class="enter-y !mb-150px !rounded-md"
+      class="enter-y !rounded-md"
       plain
       type="primary"
       block

diff --git a/src/views/my/EditNickname.vue b/src/views/my/EditNickname.vue
@@ -2,13 +2,13 @@
   <div>
     <NavBar>
       <template #right>
-        <span class="text-32px" @click="handleNickname">保存</span>
+        <span @click="handleNickname">保存</span>
       </template>
     </NavBar>
     <van-form ref="formRef">
       <van-field
         v-model="formValue.nickname"
-        class="mt-20px"
+        class="mt-4"
         name="nickname"
         placeholder="请输入昵称（2-12字）"
         :rules="[
@@ -20,7 +20,7 @@
       />
     </van-form>
 
-    <div class="note px-30px">
+    <div class="note p-6">
       <p>昵称支持2-12个中文字符或3-24个英文字符，</p>
       <p>符号仅支持”-“和”_“和”.“以及“·”</p>
     </div>
@@ -82,9 +82,7 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
-  .note {
-  margin-top: 15px;
-  font-size: 25px;
+.note {
   color: var(--van-text-color-2);
 }
 </style>
diff --git a/src/views/my/EditSign.vue b/src/views/my/EditSign.vue
@@ -2,7 +2,7 @@
   <div>
     <NavBar>
       <template #right>
-        <span class="text-32px" @click="handleNickname">保存</span>
+        <span @click="handleNickname">保存</span>
       </template>
     </NavBar>
     <van-form ref="formRef">
@@ -16,7 +16,7 @@
         label="签名"
         type="textarea"
         maxlength="70"
-        placeholder="介绍一下你自己"
+        placeholder="随知修行乃当务之急，然怠惰度日至今"
         show-word-limit
       />
     </van-form>
@@ -65,9 +65,5 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
-  .note {
-  margin-top: 15px;
-  font-size: 25px;
-  color: var(--van-text-color-2);
-}
+
 </style>
diff --git a/src/views/my/EditUserInfo.vue b/src/views/my/EditUserInfo.vue
@@ -13,7 +13,11 @@
     >
       <template #input>
         <UploaderImage>
-          <van-image class="avatar" round fit="cover" :src="avatar" />
+          <van-image
+            class="h-16 w-16"
+            round fit="cover"
+            :src="avatar"
+          />
         </UploaderImage>
       </template>
     </van-field>
@@ -65,7 +69,11 @@
     >
       <template #input>
         <UploaderImage>
-          <van-image class="cover" fit="cover" :src="cover ? cover : avatar" />
+          <van-image
+            class="cover h-15 w-25"
+            fit="cover"
+            :src="cover ? cover : avatar"
+          />
         </UploaderImage>
       </template>
     </van-field>
@@ -121,10 +129,8 @@ const showIndustryPicker = ref(false)
 const state = reactive({
   nickname: '',
   sign: '',
-  // the field v-model
   genderText: '',
   industryText: '',
-  // the pick v-model
   industryValues: [0],
   genderValues: [0],
 })
@@ -165,13 +171,7 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
-  .avatar {
-  width: 140px;
-  height: 140px;
-}
 .cover {
-  width: 170px;
-  height: 100px;
   :deep(.van-image__img) {
     border-radius: 10px !important;
   }

diff --git a/src/views/my/ThemeSetting.vue b/src/views/my/ThemeSetting.vue
@@ -14,17 +14,17 @@
         <span
           v-for="(item, index) in designStore.appThemeList"
           :key="index"
-          h="70px"
-          w="70px"
+          h="9"
+          w="9"
           items-center
-          border="2 rounded-md border-white"
+          border="2 rounded-md"
           flex="~"
           justify="center"
           :style="{ 'background-color': item }"
           @click="togTheme(item)"
         >
           <Icon v-if="item === designStore.appTheme">
-            <CheckOutlined h="!60px" w="!60px" text="white" />
+            <CheckOutlined text="white" />
           </Icon>
         </span>
       </div>