fix: 修复 css 媒体查询内的 rpx 单位未转换的问题 question/112279

packages/vue-cli-plugin-uni/packages/app-vue-style-loader/lib/addStylesClient.js

@@ -246,7 +246,7 @@ function processCss(css) {
             .replace(VAR_WINDOW_LEFT, '0px')
             .replace(VAR_WINDOW_RIGHT, '0px')
 	}
-  return css.replace(/\{[\s\S]+?\}/g, function (css) {
+  return css.replace(/\{[\s\S]+?\}|@media.+\{/g, function (css) {
     return css.replace(UPX_RE, function (a, b) {
       return uni.upx2px(b) + 'px'
     })

packages/vue-cli-plugin-uni/packages/h5-vue-style-loader/lib/addStylesClient.js

@@ -245,17 +245,17 @@ function processCss(css) {
 		var offset = getWindowOffset()
 		css = css.replace(VAR_STATUS_BAR_HEIGHT, '0px')
 			.replace(VAR_WINDOW_TOP, offset.top + 'px')
-			.replace(VAR_WINDOW_BOTTOM, offset.bottom + 'px')
-            .replace(VAR_WINDOW_LEFT, '0px')
+			.replace(VAR_WINDOW_BOTTOM, offset.bottom + 'px')
+            .replace(VAR_WINDOW_LEFT, '0px')
             .replace(VAR_WINDOW_RIGHT, '0px')
 	}
 	return css
 		.replace(BODY_SCOPED_RE, page)
 		.replace(BODY_RE, '')
 		.replace(PAGE_SCOPED_RE, 'body.' + page + ' uni-page-body')
-		.replace(/\{[\s\S]+?\}/g, function (css) {
-      if(typeof uni === 'undefined'){
-        return css
+		.replace(/\{[\s\S]+?\}|@media.+\{/g, function (css) {
+      if(typeof uni === 'undefined'){
+        return css
       }
 			return css.replace(UPX_RE, function (a, b) {
 				return uni.upx2px(b) + 'px'

packages/vue-cli-plugin-uni/packages/postcss/index.js

@@ -57,8 +57,8 @@ if (process.env.UNI_USING_V3) {
     )
   }
 
-  const tranformValue = function (decl, opts) {
-    return valueParser(decl.value)
+  const tranformValue = function (value, opts) {
+    return valueParser(value)
       .walk(node => {
         if (node.type === 'word') {
           parseWord(node, opts)
@@ -205,10 +205,16 @@ if (process.env.UNI_USING_V3) {
               }
             }
             // Transform each property declaration here
-            decl.value = tranformValue(decl, opts)
+            decl.value = tranformValue(decl.value, opts)
           })
         })
 
+        root.walkAtRules(rule => {
+          if (rule.name === 'media') {
+            rule.params = tranformValue(rule.params, opts)
+          }
+        })
+
         if (bgDecls.length) {
           const rule = postcss.rule({
             selector: 'body.?%PAGE?%'
@@ -240,7 +246,7 @@ if (process.env.UNI_USING_V3) {
               }
             }
             // Transform each property declaration here
-            decl.value = tranformValue(decl, opts)
+            decl.value = tranformValue(decl.value, opts)
           })
           if (process.env.UNI_PLATFORM !== 'quickapp-native') {
             rule.selectors = rule.selectors.map(complexSelector => {