更新CSS示例

pages/CSS/background/background-color.uvue

@@ -38,7 +38,7 @@
 
 <style>
 .common {
-  width: 500rpx;
-  height: 500rpx;
+  width: 250px;
+  height: 250px;
 }
 </style>

pages/CSS/background/background-image.uvue

@@ -22,7 +22,7 @@
 
 <style>
 	.common {
-		width: 500rpx;
-		height: 500rpx;
+		width: 250px;
+		height: 250px;
 	}
 </style>

pages/CSS/border/border-bottom.uvue

 <template>
   <view style="flex-grow: 1;">
     <view>
-      <text>border-bottom: 10rpx dashed blue</text>
-      <view class="common" style="border-bottom: 10rpx dashed blue;"></view>
+      <text>border-bottom: 5px dashed blue</text>
+      <view class="common" style="border-bottom: 5px dashed blue;"></view>
     </view>
   </view>
 </template>
@@ -13,8 +13,8 @@
 
 <style>
   .common {
-    width: 500rpx;
-    height: 500rpx;
+    width: 250px;
+    height: 250px;
     background-color: gray;
   }
 </style>
\ No newline at end of file

pages/CSS/border/border-color.uvue

@@ -7,7 +7,7 @@
         <text>border-color: red</text>
         <view
           class="common"
-          style="border-width: 10rpx; border-color: red; border-style: solid;"
+          style="border-width: 5px; border-color: red; border-style: solid;"
         ></view>
       </view>
 
@@ -15,7 +15,7 @@
         <text>border-left-color: red</text>
         <view
           class="common"
-          style="border-left-width: 10rpx; border-left-color: red; border-left-style:solid;"
+          style="border-left-width: 5px; border-left-color: red; border-left-style:solid;"
         ></view>
       </view>
 
@@ -23,7 +23,7 @@
         <text>border-top-color: green</text>
         <view
           class="common"
-          style="border-top-width: 10rpx; border-top-color: green; border-top-style: solid;"
+          style="border-top-width: 5px; border-top-color: green; border-top-style: solid;"
         ></view>
       </view>
 
@@ -31,7 +31,7 @@
         <text>border-right-color: yellow</text>
         <view
           class="common"
-          style="border-right-width: 10rpx; border-right-color: yellow; border-right-style: solid;"
+          style="border-right-width: 5px; border-right-color: yellow; border-right-style: solid;"
         ></view>
       </view>
 
@@ -39,7 +39,7 @@
         <text>border-bottom-color: blue</text>
         <view
           class="common"
-          style="border-bottom-width: 10rpx; border-bottom-color: blue; border-bottom-style: solid; "
+          style="border-bottom-width: 5px; border-bottom-color: blue; border-bottom-style: solid; "
         ></view>
       </view>
     </view>
@@ -50,8 +50,8 @@
 
 <style>
 .common {
-  width: 500rpx;
-  height: 500rpx;
+  width: 250px;
+  height: 250px;
   background-color: gray;
 }
 </style>

pages/CSS/border/border-left.uvue

 <template>
   <view style="flex-grow: 1;">
     <view>
-      <text>border-left: 10rpx solid blue</text>
-      <view class="common" style="border-left: 10rpx solid blue;"></view>
+      <text>border-left: 5px solid blue</text>
+      <view class="common" style="border-left: 5px solid blue;"></view>
     </view>
   </view>
 </template>
@@ -13,8 +13,8 @@
 
 <style>
   .common {
-    width: 500rpx;
-    height: 500rpx;
+    width: 250px;
+    height: 250px;
     background-color: gray;
   }
 </style>
\ No newline at end of file

pages/CSS/border/border-radius.uvue

@@ -4,28 +4,28 @@
     <!-- #endif -->
     <view style="flex-grow: 1">
       <view>
-        <text>border-radius: 20rpx</text>
-        <view class="common" style="border-radius: 20rpx"></view>
+        <text>border-radius: 10px</text>
+        <view class="common" style="border-radius: 10px"></view>
       </view>
 
       <view>
-        <text>border-top-left-radius: 20rpx</text>
-        <view class="common" style="border-top-left-radius: 20rpx"></view>
+        <text>border-top-left-radius: 10px</text>
+        <view class="common" style="border-top-left-radius: 10px"></view>
       </view>
 
       <view>
-        <text>border-top-right-radius: 20rpx</text>
-        <view class="common" style="border-top-right-radius: 20rpx"></view>
+        <text>border-top-right-radius: 10px</text>
+        <view class="common" style="border-top-right-radius: 10px"></view>
       </view>
 
       <view>
-        <text>border-bottom-left-radius: 20rpx</text>
-        <view class="common" style="border-bottom-left-radius: 20rpx"></view>
+        <text>border-bottom-left-radius: 10px</text>
+        <view class="common" style="border-bottom-left-radius: 10px"></view>
       </view>
 
       <view>
-        <text>border-bottom-right-radius: 20rpx</text>
-        <view class="common" style="border-bottom-right-radius: 20rpx"></view>
+        <text>border-bottom-right-radius: 10px</text>
+        <view class="common" style="border-bottom-right-radius: 10px"></view>
       </view>
     </view>
     <!-- #ifdef APP -->
@@ -35,8 +35,8 @@
 
 <style>
 .common {
-  width: 500rpx;
-  height: 500rpx;
+  width: 250px;
+  height: 250px;
   background-color: gray;
 }
 </style>

pages/CSS/border/border-right.uvue

 <template>
   <view style="flex-grow: 1;">
     <view>
-      <text>border-right: 10rpx solid blue</text>
-      <view class="common" style="border-right: 10rpx solid blue;"></view>
+      <text>border-right: 5px solid blue</text>
+      <view class="common" style="border-right: 5px solid blue;"></view>
     </view>
   </view>
 </template>
@@ -13,8 +13,8 @@
 
 <style>
   .common {
-    width: 500rpx;
-    height: 500rpx;
+    width: 250px;
+    height: 250px;
     background-color: gray;
   }
 </style>
\ No newline at end of file

pages/CSS/border/border-style.uvue

@@ -7,7 +7,7 @@
         <text>border-style: dashed</text>
         <view
           class="common"
-          style="border-width: 10rpx; border-style: dashed"
+          style="border-width: 5px; border-style: dashed"
         ></view>
       </view>
 
@@ -15,7 +15,7 @@
         <text>border-left-style: dashed</text>
         <view
           class="common"
-          style="border-left-width: 10rpx; border-left-style: dashed"
+          style="border-left-width: 5px; border-left-style: dashed"
         ></view>
       </view>
 
@@ -23,7 +23,7 @@
         <text>border-top-style: dashed</text>
         <view
           class="common"
-          style="border-top-width: 10rpx; border-top-style: dashed"
+          style="border-top-width: 5px; border-top-style: dashed"
         ></view>
       </view>
 
@@ -31,7 +31,7 @@
         <text>border-right-style: dotted</text>
         <view
           class="common"
-          style="border-right-width: 10rpx; border-right-style: dotted"
+          style="border-right-width: 5px; border-right-style: dotted"
         ></view>
       </view>
 
@@ -39,7 +39,7 @@
         <text>border-bottom-style: dotted</text>
         <view
           class="common"
-          style="border-bottom-width: 10rpx; border-bottom-style: dotted"
+          style="border-bottom-width: 5px; border-bottom-style: dotted"
         ></view>
       </view>
     </view>
@@ -50,8 +50,8 @@
 
 <style>
 .common {
-  width: 500rpx;
-  height: 500rpx;
+  width: 250px;
+  height: 250px;
   background-color: gray;
 }
 </style>

pages/CSS/border/border-top.uvue

 <template>
   <view style="flex-grow: 1;">
     <view>
-      <text>border-top: 10rpx dashed blue</text>
-      <view class="common" style="border-top: 10rpx dashed blue;"></view>
+      <text>border-top: 5px dashed blue</text>
+      <view class="common" style="border-top: 5px dashed blue;"></view>
     </view>
   </view>
 </template>
@@ -13,8 +13,8 @@
 
 <style>
   .common {
-    width: 500rpx;
-    height: 500rpx;
+    width: 250px;
+    height: 250px;
     background-color: gray;
   }
 </style>
\ No newline at end of file

pages/CSS/border/border-width.uvue

@@ -4,28 +4,28 @@
     <!-- #endif -->
     <view style="flex-grow: 1">
       <view>
-        <text>border-width: 10rpx</text>
-        <view class="common" style="border-width: 10rpx; border-style: solid;"></view>
+        <text>border-width: 5px</text>
+        <view class="common" style="border-width: 5px; border-style: solid;"></view>
       </view>
 
       <view>
-        <text>border-left-width: 10rpx</text>
-        <view class="common" style="border-left-width: 10rpx; border-left-style: solid; "></view>
+        <text>border-left-width: 5px</text>
+        <view class="common" style="border-left-width: 5px; border-left-style: solid; "></view>
       </view>
 
       <view>
-        <text>border-top-width: 20rpx</text>
-        <view class="common" style="border-top-width: 20rpx; border-top-style: solid; "></view>
+        <text>border-top-width: 10px</text>
+        <view class="common" style="border-top-width: 10px; border-top-style: solid; "></view>
       </view>
 
       <view>
-        <text>border-right-width: 30rpx</text>
-        <view class="common" style="border-right-width: 30rpx; border-right-style: solid; "></view>
+        <text>border-right-width: 15px</text>
+        <view class="common" style="border-right-width: 15px; border-right-style: solid; "></view>
       </view>
 
       <view>
-        <text>border-bottom-width: 40rpx</text>
-        <view class="common" style="border-bottom-width: 40rpx; border-bottom-style: solid; "></view>
+        <text>border-bottom-width: 20px</text>
+        <view class="common" style="border-bottom-width: 20px; border-bottom-style: solid; "></view>
       </view>
     </view>
     <!-- #ifdef APP -->
@@ -35,8 +35,8 @@
 
 <style>
 .common {
-  width: 500rpx;
-  height: 500rpx;
+  width: 250px;
+  height: 250px;
   background-color: gray;
 }
 </style>

pages/CSS/border/border.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>border: 10rpx dotted blue</text>
-			<view class="common" style="border: 10rpx dotted blue;"></view>
+			<text>border: 5px dotted blue</text>
+			<view class="common" style="border: 5px dotted blue;"></view>
 		</view>
 	</view>
 </template>
@@ -13,8 +13,8 @@
 
 <style>
 	.common {
-		width: 500rpx;
-		height: 500rpx;
+		width: 250px;
+		height: 250px;
 		background-color: gray;
 	}
 </style>
\ No newline at end of file

pages/CSS/border/complex-border/complex-border.uvue

@@ -3,7 +3,7 @@
 		<view>
 			<text>圆角 : 各边之间 不同width && 不同颜色 && 不同圆角</text>
 			<view
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				style="width: 250px;height: 250px;background-color: gray;justify-content: center;align-items: center;">
 				<view class="border-circle"></view>
 			</view>
 		</view>
@@ -11,7 +11,7 @@
 		<view>
 			<text>直角 : 各边之间 不同width && 不同颜色 </text>
 			<view
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				style="width: 250px;height: 250px;background-color: gray;justify-content: center;align-items: center;">
 				<view class="border-rect"></view>
 			</view>
 		</view>
@@ -24,34 +24,34 @@
 
 <style>
 	.common {
-		width: 500rpx;
-		height: 500rpx;
+		width: 250px;
+		height: 250px;
 		background-color: gray;
 	}
 
 	.border-circle {
-		width: 250rpx;
-		height: 250rpx;
+		width: 125px;
+		height: 125px;
 		background-color: #00dd00;
-		border-width: 20rpx;
+		border-width: 10px;
     border-style: solid;
 		border-color: #000000;
-		border-bottom-width: 40rpx;
+		border-bottom-width: 20px;
 		border-bottom-color: #ff0000;
-		border-bottom-right-radius: 50rpx;
-		border-bottom-left-radius: 30rpx;
-		border-radius: 10rpx;
+		border-bottom-right-radius: 25px;
+		border-bottom-left-radius: 15px;
+		border-radius: 5px;
 		border-right-color: #FFDC02;
 	}
 
 	.border-rect {
-		width: 250rpx;
-		height: 250rpx;
+		width: 125px;
+		height: 125px;
     border-style: solid;
 		background-color: #00dd00;
-		border-width: 20rpx;
+		border-width: 10px;
 		border-color: #000000;
-		border-bottom-width: 40rpx;
+		border-bottom-width: 20px;
 		border-bottom-color: #ff0000;
 		border-right-color: #FFDC02;
 	}

pages/CSS/box-shadow/box-shadow.uvue

@@ -100,7 +100,7 @@
         <view class="backgroundview">
           <view
             class="common"
-            style="border-radius: 125rpx; box-shadow: 5px 5px black"
+            style="border-radius: 62px; box-shadow: 5px 5px black"
           ></view>
         </view>
       </view>
@@ -110,7 +110,7 @@
         <view class="backgroundview">
           <view
             class="common"
-            style="border-radius: 125rpx; box-shadow: 5px 5px 5px black"
+            style="border-radius: 62px; box-shadow: 5px 5px 5px black"
           ></view>
         </view>
       </view>
@@ -120,7 +120,7 @@
         <view class="backgroundview">
           <view
             class="common"
-            style="border-radius: 125rpx; box-shadow: 5px 10px 5px black"
+            style="border-radius: 62px; box-shadow: 5px 10px 5px black"
           ></view>
         </view>
       </view>
@@ -130,7 +130,7 @@
         <view class="backgroundview">
           <view
             class="common"
-            style="border-radius: 125rpx; box-shadow: 5px 5px 5px 5px black"
+            style="border-radius: 62px; box-shadow: 5px 5px 5px 5px black"
           ></view>
         </view>
       </view>
@@ -140,7 +140,7 @@
         <view class="backgroundview">
           <view
             class="common"
-            style="border-radius: 125rpx; box-shadow: -5px -5px 5px black"
+            style="border-radius: 62px; box-shadow: -5px -5px 5px black"
           ></view>
         </view>
       </view>
@@ -151,7 +151,7 @@
           <view
             class="common"
             style="
-              border-radius: 125rpx;
+              border-radius: 62px;
               box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
             "
           ></view>
@@ -165,14 +165,14 @@
 
 <style>
 .common {
-  width: 250rpx;
-  height: 250rpx;
+  width: 125px;
+  height: 125px;
   background-color: brown;
 }
 
 .backgroundview {
-  width: 500rpx;
-  height: 500rpx;
+  width: 250px;
+  height: 250px;
   background-color: white;
   justify-content: center;
   align-items: center;

pages/CSS/display/flex.uvue

@@ -40,7 +40,7 @@ export default {
 	color: red;
 }
 .content {
-	border: 10rpx dotted blue;
+	border: 5px dotted blue;
 	margin: 50px 0px;
 	padding: 50px;
 	width: 200px;

pages/CSS/display/none.uvue

@@ -40,7 +40,7 @@ export default {
 	color: red;
 }
 .content {
-	border: 10rpx solid blue;
+	border: 5px solid blue;
 	margin: 50px 0px;
 	padding: 50px;
 	width: 200px;

pages/CSS/flex/align-content.uvue

@@ -7,22 +7,22 @@
         <text>align-content: center</text>
         <view class="common" style="align-content: center">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -31,22 +31,22 @@
         <text>align-content: flex-start</text>
         <view class="common" style="align-content: flex-start">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -55,22 +55,22 @@
         <text>align-content: flex-end</text>
         <view class="common" style="align-content: flex-end">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -79,22 +79,22 @@
         <text>align-content: space-between</text>
         <view class="common" style="align-content: space-between">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -103,22 +103,22 @@
         <text>align-content: space-around</text>
         <view class="common" style="align-content: space-around">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -126,12 +126,12 @@
       <view>
         <text>align-content: stretch</text>
         <view class="common" style="align-content: stretch">
-          <view style="width: 100rpx; background-color: red"></view>
-          <view style="width: 100rpx; background-color: green"></view>
-          <view style="width: 100rpx; background-color: blue"></view>
-          <view style="width: 100rpx; background-color: red"></view>
-          <view style="width: 100rpx; background-color: green"></view>
-          <view style="width: 100rpx; background-color: blue"></view>
+          <view style="width: 50px; background-color: red"></view>
+          <view style="width: 50px; background-color: green"></view>
+          <view style="width: 50px; background-color: blue"></view>
+          <view style="width: 50px; background-color: red"></view>
+          <view style="width: 50px; background-color: green"></view>
+          <view style="width: 50px; background-color: blue"></view>
         </view>
       </view>
     </view>
@@ -142,8 +142,8 @@
 
 <style>
 .common {
-  width: 500rpx;
-  height: 500rpx;
+  width: 250px;
+  height: 250px;
   background-color: gray;
   flex-flow: row wrap;
 }

pages/CSS/flex/align-items.uvue

@@ -7,13 +7,13 @@
         <text>align-items: center</text>
         <view class="common" style="align-items: center">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -22,13 +22,13 @@
         <text>align-items: flex-start</text>
         <view class="common" style="align-items: flex-start">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -37,13 +37,13 @@
         <text>align-items: flex-end</text>
         <view class="common" style="align-items: flex-end">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -51,9 +51,9 @@
       <view>
         <text>align-items: stretch</text>
         <view class="common" style="align-items: stretch">
-          <view style="width: 100rpx; background-color: red"></view>
-          <view style="width: 100rpx; background-color: green"></view>
-          <view style="width: 100rpx; background-color: blue"></view>
+          <view style="width: 50px; background-color: red"></view>
+          <view style="width: 50px; background-color: green"></view>
+          <view style="width: 50px; background-color: blue"></view>
         </view>
       </view>
     </view>
@@ -64,8 +64,8 @@
 
 <style>
 .common {
-  width: 500rpx;
-  height: 500rpx;
+  width: 250px;
+  height: 250px;
   background-color: gray;
   flex-direction: row;
 }

pages/CSS/flex/flex-basis.uvue

@@ -4,20 +4,20 @@
       <text>flex-basis</text>
       <view
         style="
-          width: 500rpx;
-          height: 300rpx;
+          width: 250px;
+          height: 150px;
           background-color: gray;
           flex-direction: row;
         "
       >
-        <view class="common" style="flex-basis: 300rpx">
-          <text>300rpx</text>
+        <view class="common" style="flex-basis: 150px">
+          <text>150px</text>
         </view>
         <view
-          style="width: 100rpx; height: 100rpx; background-color: green"
+          style="width: 50px; height: 50px; background-color: green"
         ></view>
         <view
-          style="width: 100rpx; height: 100rpx; background-color: blue"
+          style="width: 50px; height: 50px; background-color: blue"
         ></view>
       </view>
     </view>
@@ -26,8 +26,8 @@
 
 <style>
 .common {
-  width: 100rpx;
-  height: 100rpx;
+  width: 50px;
+  height: 50px;
   background-color: red;
   justify-content: center;
   align-items: center;

pages/CSS/flex/flex-direction.uvue

@@ -7,13 +7,13 @@
         <text>flex-direction: row</text>
         <view class="common" style="flex-direction: row">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -22,13 +22,13 @@
         <text>flex-direction: row-reverse</text>
         <view class="common" style="flex-direction: row-reverse">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -37,13 +37,13 @@
         <text>flex-direction: column</text>
         <view class="common" style="flex-direction: column">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -52,13 +52,13 @@
         <text>flex-direction: column-reverse</text>
         <view class="common" style="flex-direction: column-reverse">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -70,8 +70,8 @@
 
 <style>
 .common {
-  width: 500rpx;
-  height: 500rpx;
+  width: 250px;
+  height: 250px;
   background-color: gray;
 }
 </style>

pages/CSS/flex/flex-flow.uvue

@@ -8,48 +8,48 @@
         <view class="common" style="flex-flow: row nowrap">
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: red;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: green;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: blue;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: red;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: green;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: blue;
               flex-shrink: 0;
             "
@@ -62,48 +62,48 @@
         <view class="common" style="flex-flow: row wrap">
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: red;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: green;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: blue;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: red;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: green;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: blue;
               flex-shrink: 0;
             "
@@ -116,48 +116,48 @@
         <view class="common" style="flex-flow: column nowrap">
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: red;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: green;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: blue;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: red;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: green;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: blue;
               flex-shrink: 0;
             "
@@ -170,48 +170,48 @@
         <view class="common" style="flex-flow: column wrap">
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: red;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: green;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: blue;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: red;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: green;
               flex-shrink: 0;
             "
           ></view>
           <view
             style="
-              width: 100rpx;
-              height: 100rpx;
+              width: 50px;
+              height: 50px;
               background-color: blue;
               flex-shrink: 0;
             "
@@ -226,8 +226,8 @@
 
 <style>
 .common {
-  width: 500rpx;
-  height: 500rpx;
+  width: 250px;
+  height: 250px;
   background-color: gray;
 }
 </style>

pages/CSS/flex/flex-grow.uvue

@@ -4,8 +4,8 @@
       <text>flex-grow</text>
       <view
         style="
-          width: 500rpx;
-          height: 300rpx;
+          width: 250px;
+          height: 150px;
           background-color: gray;
           flex-direction: row;
         "
@@ -26,8 +26,8 @@
 
 <style>
 .common {
-  width: 100rpx;
-  height: 100rpx;
+  width: 50px;
+  height: 50px;
   justify-content: center;
   align-items: center;
 }

pages/CSS/flex/flex-shrink.uvue

@@ -4,8 +4,8 @@
       <text>flex-shrink</text>
       <view
         style="
-          width: 500rpx;
-          height: 300rpx;
+          width: 250px;
+          height: 150px;
           background-color: gray;
           flex-direction: row;
         "
@@ -26,8 +26,8 @@
 
 <style>
 .common {
-  width: 250rpx;
-  height: 100rpx;
+  width: 125px;
+  height: 50px;
   justify-content: center;
   align-items: center;
 }

pages/CSS/flex/flex.uvue

@@ -7,18 +7,18 @@
         <text>flex: 0</text>
         <view
           style="
-            width: 500rpx;
-            height: 300rpx;
+            width: 250px;
+            height: 150px;
             background-color: gray;
             flex-direction: row;
           "
         >
-          <view class="common" style="min-width: 50rpx; flex: 0"></view>
+          <view class="common" style="min-width: 25px; flex: 0"></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -27,18 +27,18 @@
         <text>flex: 1</text>
         <view
           style="
-            width: 500rpx;
-            height: 300rpx;
+            width: 250px;
+            height: 150px;
             background-color: gray;
             flex-direction: row;
           "
         >
           <view class="common" style="flex: 1"></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -47,18 +47,18 @@
         <text>flex: auto</text>
         <view
           style="
-            width: 500rpx;
-            height: 300rpx;
+            width: 250px;
+            height: 150px;
             background-color: gray;
             flex-direction: row;
           "
         >
           <view class="common" style="flex: auto"></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -67,18 +67,18 @@
         <text>flex: none</text>
         <view
           style="
-            width: 500rpx;
-            height: 300rpx;
+            width: 250px;
+            height: 150px;
             background-color: gray;
             flex-direction: row;
           "
         >
           <view class="common" style="flex: none"></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -90,8 +90,8 @@
 
 <style>
 .common {
-  width: 100rpx;
-  height: 100rpx;
+  width: 50px;
+  height: 50px;
   background-color: red;
 }
 </style>

pages/CSS/flex/justify-content.uvue

@@ -7,13 +7,13 @@
         <text>justify-content: center</text>
         <view class="common" style="justify-content: center">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -22,13 +22,13 @@
         <text>justify-content: flex-start</text>
         <view class="common" style="justify-content: flex-start">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -37,13 +37,13 @@
         <text>justify-content: flex-end</text>
         <view class="common" style="justify-content: flex-end">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -52,13 +52,13 @@
         <text>justify-content: space-between</text>
         <view class="common" style="justify-content: space-between">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -67,13 +67,13 @@
         <text>justify-content: space-around</text>
         <view class="common" style="justify-content: space-around">
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </view>
       </view>
@@ -85,8 +85,8 @@
 
 <style>
 .common {
-  width: 500rpx;
-  height: 500rpx;
+  width: 250px;
+  height: 250px;
   background-color: gray;
   flex-direction: row;
 }

pages/CSS/layout/height.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>height: 500rpx</text>
-			<view class="common" style="height: 500rpx;"></view>
+			<text>height: 250px</text>
+			<view class="common" style="height: 250px;"></view>
 		</view>
 
-		<view style="height: 500rpx;">
+		<view style="height: 250px;">
 			<text>height: 50%</text>
 			<view class="common" style="height: 50%;"></view>
 		</view>
@@ -18,7 +18,7 @@
 
 <style>
 	.common {
-		width: 500rpx;
+		width: 250px;
 		background-color: red;
 	}
 </style>
\ No newline at end of file

pages/CSS/layout/max-height.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>max-height: 500rpx</text>
-			<view class="common" style="max-height: 500rpx;">
-				<text>height: 1000rpx</text>
+			<text>max-height: 250px</text>
+			<view class="common" style="max-height: 250px;">
+				<text>height: 500px</text>
 			</view>
 		</view>
 	</view>
@@ -15,8 +15,8 @@
 
 <style>
 	.common {
-		width: 500rpx;
-		height: 1000rpx;
+		width: 250px;
+		height: 500px;
 		background-color: red;
 		justify-content: center;
 		align-items: center;

pages/CSS/layout/max-width.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>max-width: 500rpx</text>
-			<view class="common" style="max-width: 500rpx;">
-				<text>width: 1000rpx</text>
+			<text>max-width: 250px</text>
+			<view class="common" style="max-width: 250px;">
+				<text>width: 500px</text>
 			</view>
 		</view>
 	</view>
@@ -15,8 +15,8 @@
 
 <style>
 	.common {
-		width: 1000rpx;
-		height: 500rpx;
+		width: 500px;
+		height: 250px;
 		background-color: red;
 		justify-content: center;
 		align-items: center;

pages/CSS/layout/min-height.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>min-height: 500rpx</text>
-			<view class="common" style="min-height: 500rpx;">
-				<text>height: 100rpx</text>
+			<text>min-height: 250px</text>
+			<view class="common" style="min-height: 250px;">
+				<text>height: 50px</text>
 			</view>
 		</view>
 	</view>
@@ -15,8 +15,8 @@
 
 <style>
 	.common {
-		width: 500rpx;
-		height: 100rpx;
+		width: 250px;
+		height: 50px;
 		background-color: red;
 		justify-content: center;
 		align-items: center;

pages/CSS/layout/min-width.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>min-width: 500rpx</text>
-			<view class="common" style="min-width: 500rpx;">
-				<text>width: 100rpx</text>
+			<text>min-width: 250px</text>
+			<view class="common" style="min-width: 250px;">
+				<text>width: 50px</text>
 			</view>
 		</view>
 	</view>
@@ -15,8 +15,8 @@
 
 <style>
 	.common {
-		width: 100rpx;
-		height: 500rpx;
+		width: 50px;
+		height: 250px;
 		background-color: red;
 		justify-content: center;
 		align-items: center;

pages/CSS/layout/position.uvue

@@ -6,34 +6,34 @@
       <view>
         <text>position: relative</text>
         <scroll-view
-          style="width: 500rpx; height: 500rpx; background-color: gray"
+          style="width: 250px; height: 250px; background-color: gray"
         >
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view class="common" style="position: relative">
             <text>relative</text>
           </view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </scroll-view>
       </view>
@@ -41,34 +41,34 @@
       <view>
         <text>position: absolute</text>
         <scroll-view
-          style="width: 500rpx; height: 500rpx; background-color: gray"
+          style="width: 250px; height: 250px; background-color: gray"
         >
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view class="common" style="position: absolute">
             <text>absolute</text>
           </view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </scroll-view>
       </view>
@@ -76,34 +76,34 @@
       <view>
         <text>position: fixed</text>
         <scroll-view
-          style="width: 500rpx; height: 500rpx; background-color: gray"
+          style="width: 250px; height: 250px; background-color: gray"
         >
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view class="common" style="position: fixed">
             <text>fixed</text>
           </view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: red"
+            style="width: 50px; height: 50px; background-color: red"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: green"
+            style="width: 50px; height: 50px; background-color: green"
           ></view>
           <view
-            style="width: 100rpx; height: 100rpx; background-color: blue"
+            style="width: 50px; height: 50px; background-color: blue"
           ></view>
         </scroll-view>
       </view>
@@ -115,11 +115,11 @@
 
 <style>
 .common {
-  width: 100rpx;
-  height: 100rpx;
+  width: 50px;
+  height: 50px;
   background-color: green;
-  top: 50rpx;
-  left: 50rpx;
+  top: 25px;
+  left: 25px;
   justify-content: center;
   align-items: center;
 }

pages/CSS/layout/visibility.uvue

@@ -30,8 +30,8 @@
 
 <style>
 	.common {
-		width: 500rpx;
-		height: 500rpx;
+		width: 250px;
+		height: 250px;
 		background-color: red;
 	}
 </style>
\ No newline at end of file

pages/CSS/layout/width.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>width: 500rpx</text>
-			<view class="common" style="width: 500rpx;"></view>
+			<text>width: 250px</text>
+			<view class="common" style="width: 250px;"></view>
 		</view>
 
-		<view style="width: 500rpx;">
+		<view style="width: 250px;">
 			<text>width: 50%</text>
 			<view class="common" style="width: 50%;"></view>
 		</view>
@@ -18,7 +18,7 @@
 
 <style>
 	.common {
-		height: 500rpx;
+		height: 250px;
 		background-color: red;
 	}
 </style>
\ No newline at end of file

pages/CSS/layout/z-index.uvue

@@ -5,21 +5,21 @@
         <text>position: fixed</text>
         <text>z-index: 10</text>
       </view>
-      <view class="common fixed" style="background-color: green;z-index: 5;top: 175rpx;left: 175rpx;">
+      <view class="common fixed" style="background-color: green;z-index: 5;top: 87px;left: 87px;">
         <text>position: fixed</text>
         <text>z-index: 5</text>
       </view>
     </view>
-    <view style="top: 500rpx;">
+    <view style="top: 250px;">
       <view class="common" style="background-color: red;z-index: 10;">
         <text>z-index: 10</text>
       </view>
-      <view ref="view" class="common" style="background-color: green;z-index: 5;top: -75rpx;left: 175rpx;"
+      <view ref="view" class="common" style="background-color: green;z-index: 5;top: -37px;left: 87px;"
         @click="changeZIndex(20)">
         <text>z-index: {{zIndex}}</text>
         <text>点击修改z-index</text>
       </view>
-      <view class="common" style="background-color: blue;top: -150rpx;left: 350rpx;">
+      <view class="common" style="background-color: blue;top: -75px;left: 175px;">
         <text>z-index: 0</text>
       </view>
     </view>
@@ -44,8 +44,8 @@
 
 <style>
   .common {
-    width: 250rpx;
-    height: 250rpx;
+    width: 125px;
+    height: 125px;
     justify-content: center;
     align-items: center;
   }

pages/CSS/margin/margin-bottom.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>margin-bottom: 50rpx</text>
-			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+			<text>margin-bottom: 25px</text>
+			<view style="width: 250px;height: 250px;background-color: gray;">
 				<view class="common" style="background-color: red;"></view>
-				<view class="common" style="margin-bottom: 50rpx;"></view>
+				<view class="common" style="margin-bottom: 25px;"></view>
 				<view class="common" style="background-color: blue;"></view>
 			</view>
 		</view>
 
 		<view>
 			<text>margin-bottom: 10%</text>
-			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+			<view style="width: 250px;height: 250px;background-color: gray;">
 				<view class="common" style="background-color: red;"></view>
 				<view class="common" style="margin-bottom: 10%;"></view>
 				<view class="common" style="background-color: blue;"></view>
@@ -26,7 +26,7 @@
 
 <style>
 	.common {
-		height: 100rpx;
+		height: 50px;
 		background-color: green;
 	}
 </style>
\ No newline at end of file

pages/CSS/margin/margin-left.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>margin-left: 50rpx</text>
-			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+			<text>margin-left: 25px</text>
+			<view style="width: 250px;height: 250px;background-color: gray;">
 				<view class="common" style="background-color: red;"></view>
-				<view class="common" style="margin-left: 50rpx;"></view>
+				<view class="common" style="margin-left: 25px;"></view>
 				<view class="common" style="background-color: blue;"></view>
 			</view>
 		</view>
 
 		<view>
 			<text>margin-left: 10%</text>
-			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+			<view style="width: 250px;height: 250px;background-color: gray;">
 				<view class="common" style="background-color: red;"></view>
 				<view class="common" style="margin-left: 10%;"></view>
 				<view class="common" style="background-color: blue;"></view>
@@ -26,7 +26,7 @@
 
 <style>
 	.common {
-		height: 100rpx;
+		height: 50px;
 		background-color: green;
 	}
 </style>
\ No newline at end of file

pages/CSS/margin/margin-right.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>margin-right: 50rpx</text>
-			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+			<text>margin-right: 25px</text>
+			<view style="width: 250px;height: 250px;background-color: gray;">
 				<view class="common" style="background-color: red;"></view>
-				<view class="common" style="margin-right: 50rpx;"></view>
+				<view class="common" style="margin-right: 25px;"></view>
 				<view class="common" style="background-color: blue;"></view>
 			</view>
 		</view>
 
 		<view>
 			<text>margin-right: 10%</text>
-			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+			<view style="width: 250px;height: 250px;background-color: gray;">
 				<view class="common" style="background-color: red;"></view>
 				<view class="common" style="margin-right: 10%;"></view>
 				<view class="common" style="background-color: blue;"></view>
@@ -26,7 +26,7 @@
 
 <style>
 	.common {
-		height: 100rpx;
+		height: 50px;
 		background-color: green;
 	}
 </style>
\ No newline at end of file

pages/CSS/margin/margin-top.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>margin-top: 50rpx</text>
-			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+			<text>margin-top: 25px</text>
+			<view style="width: 250px;height: 250px;background-color: gray;">
 				<view class="common" style="background-color: red;"></view>
-				<view class="common" style="margin-top: 50rpx;"></view>
+				<view class="common" style="margin-top: 25px;"></view>
 				<view class="common" style="background-color: blue;"></view>
 			</view>
 		</view>
 
 		<view>
 			<text>margin-top: 10%</text>
-			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+			<view style="width: 250px;height: 250px;background-color: gray;">
 				<view class="common" style="background-color: red;"></view>
 				<view class="common" style="margin-top: 10%;"></view>
 				<view class="common" style="background-color: blue;"></view>
@@ -26,7 +26,7 @@
 
 <style>
 	.common {
-		height: 100rpx;
+		height: 50px;
 		background-color: green;
 	}
 </style>
\ No newline at end of file

pages/CSS/margin/margin.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>margin: 50rpx</text>
-			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+			<text>margin: 25px</text>
+			<view style="width: 250px;height: 250px;background-color: gray;">
 				<view class="common" style="background-color: red;"></view>
-				<view class="common" style="margin: 50rpx;"></view>
+				<view class="common" style="margin: 25px;"></view>
 				<view class="common" style="background-color: blue;"></view>
 			</view>
 		</view>
 
 		<view>
 			<text>margin: 10%</text>
-			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+			<view style="width: 250px;height: 250px;background-color: gray;">
 				<view class="common" style="background-color: red;"></view>
 				<view class="common" style="margin: 10%;"></view>
 				<view class="common" style="background-color: blue;"></view>
@@ -26,7 +26,7 @@
 
 <style>
 	.common {
-		height: 100rpx;
+		height: 50px;
 		background-color: green;
 	}
 </style>
\ No newline at end of file

pages/CSS/padding/padding-bottom.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>padding-bottom: 50rpx</text>
-			<view class="common" style="padding-bottom: 50rpx;">
+			<text>padding-bottom: 25px</text>
+			<view class="common" style="padding-bottom: 25px;">
 				<view style="flex-grow: 1;background-color: red;"></view>
 			</view>
 		</view>
 
-		<view style="width: 500rpx;">
+		<view style="width: 250px;">
 			<text>padding-bottom: 10%</text>
 			<view class="common" style="padding-bottom: 10%;">
 				<view style="flex-grow: 1;background-color: red;"></view>
@@ -22,8 +22,8 @@
 
 <style>
 	.common {
-		width: 500rpx;
-		height: 500rpx;
+		width: 250px;
+		height: 250px;
 		background-color: gray;
 	}
 </style>
\ No newline at end of file

pages/CSS/padding/padding-left.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>padding-left: 50rpx</text>
-			<view class="common" style="padding-left: 50rpx;">
+			<text>padding-left: 25px</text>
+			<view class="common" style="padding-left: 25px;">
 				<view style="flex-grow: 1;background-color: red;"></view>
 			</view>
 		</view>
 
-		<view style="width: 500rpx;">
+		<view style="width: 250px;">
 			<text>padding-left: 10%</text>
 			<view class="common" style="padding-left: 10%;">
 				<view style="flex-grow: 1;background-color: red;"></view>
@@ -22,8 +22,8 @@
 
 <style>
 	.common {
-		width: 500rpx;
-		height: 500rpx;
+		width: 250px;
+		height: 250px;
 		background-color: gray;
 	}
 </style>
\ No newline at end of file

pages/CSS/padding/padding-right.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>padding-right: 50rpx</text>
-			<view class="common" style="padding-right: 50rpx;">
+			<text>padding-right: 25px</text>
+			<view class="common" style="padding-right: 25px;">
 				<view style="flex-grow: 1;background-color: red;"></view>
 			</view>
 		</view>
 
-		<view style="width: 500rpx;">
+		<view style="width: 250px;">
 			<text>padding-right: 10%</text>
 			<view class="common" style="padding-right: 10%;">
 				<view style="flex-grow: 1;background-color: red;"></view>
@@ -22,8 +22,8 @@
 
 <style>
 	.common {
-		width: 500rpx;
-		height: 500rpx;
+		width: 250px;
+		height: 250px;
 		background-color: gray;
 	}
 </style>
\ No newline at end of file

pages/CSS/padding/padding-top.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>padding-top: 50rpx</text>
-			<view class="common" style="padding-top: 50rpx;">
+			<text>padding-top: 25px</text>
+			<view class="common" style="padding-top: 25px;">
 				<view style="flex-grow: 1;background-color: red;"></view>
 			</view>
 		</view>
 
-		<view style="width: 500rpx;">
+		<view style="width: 250px;">
 			<text>padding-top: 10%</text>
 			<view class="common" style="padding-top: 10%;">
 				<view style="flex-grow: 1;background-color: red;"></view>
@@ -22,8 +22,8 @@
 
 <style>
 	.common {
-		width: 500rpx;
-		height: 500rpx;
+		width: 250px;
+		height: 250px;
 		background-color: gray;
 	}
 </style>
\ No newline at end of file

pages/CSS/padding/padding.uvue

 <template>
 	<view style="flex-grow: 1;">
 		<view>
-			<text>padding: 50rpx</text>
-			<view class="common" style="padding: 50rpx;">
+			<text>padding: 25px</text>
+			<view class="common" style="padding: 25px;">
 				<view style="flex-grow: 1;background-color: red;"></view>
 			</view>
 		</view>
 
-		<view style="width: 500rpx;">
+		<view style="width: 250px;">
 			<text>padding: 10%</text>
 			<view class="common" style="padding: 10%;">
 				<view style="flex-grow: 1;background-color: red;"></view>
@@ -22,8 +22,8 @@
 
 <style>
 	.common {
-		width: 500rpx;
-		height: 500rpx;
+		width: 250px;
+		height: 250px;
 		background-color: gray;
 	}
 </style>
\ No newline at end of file

pages/CSS/text/color.uvue

 <template>
 	<view style="flex-grow: 1;">
-		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+		<view style="height: 250px;background-color: gray;justify-content: center;align-items: center;">
 			<text class="common" style="color: rgb(255, 0, 0);">color: rgb(255, 0, 0)</text>
 			<text class="common" style="color: rgba(255, 0, 0, 0.5);">color: rgba(255, 0, 0, 0.5)</text>
 			<text class="common" style="color: #ff0000;">color: #ff0000</text>

pages/CSS/text/font-size.uvue

 <template>
 	<view style="flex-grow: 1;">
-		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
-			<text style="font-size: 30rpx;">font-size: 30rpx</text>
+		<view style="height: 250px;background-color: gray;justify-content: center;align-items: center;">
+			<text style="font-size: 15px;">font-size: 15px</text>
 			<text style="font-size: 30px;">font-size: 30px</text>
 		</view>
 	</view>

pages/CSS/text/font-style.uvue

 <template>
 	<view style="flex-grow: 1;">
-		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+		<view style="height: 250px;background-color: gray;justify-content: center;align-items: center;">
 			<text class="common" style="font-style: italic;">font-style: italic</text>
 			<text class="common" style="font-style: normal;">font-style: normal</text>
 		</view>

pages/CSS/text/font-weight.uvue

 <template>
 	<view style="flex-grow: 1;">
-		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+		<view style="height: 250px;background-color: gray;justify-content: center;align-items: center;">
 			<text class="common" style="font-weight: normal;">font-weight: normal</text>
 			<text class="common" style="font-weight: bold;">font-weight: bold</text>
 			<text class="common" style="font-weight: 400;">font-weight: 400</text>

pages/CSS/text/letter-spacing.uvue

 <template>
 	<view style="flex-grow: 1;">
-		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+		<view style="height: 250px;background-color: gray;justify-content: center;align-items: center;">
 			<text class="common">letter-spacing</text>
 			<text class="common" style="letter-spacing: 5px;">letter-spacing: 5px</text>
 			<text class="common" style="letter-spacing: -2px;">letter-spacing: -2px</text>

pages/CSS/text/line-height.uvue

 <template>
   <view style="flex-grow: 1;">
-    <view style="height: 1000rpx;background-color: gray;justify-content: center;align-items: center;">
-      <text class="common" style="line-height: 150rpx;">line-height: 150rpx</text>
+    <view style="height: 500px;background-color: gray;justify-content: center;align-items: center;">
+      <text class="common" style="line-height: 75px;">line-height: 75px</text>
       <text class="common" style="line-height: 3;">line-height: 3</text>
       <text class="common" style="line-height: 3em;">line-height: 3em</text>
       <text class="common" style="line-height: 3;">line-height: 3\nline-height: 3\nline-height: 3</text>

pages/CSS/text/text-align.uvue

 <template>
 	<view style="flex-grow: 1;">
-		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+		<view style="height: 250px;background-color: gray;justify-content: center;align-items: center;">
 			<text class="common" style="text-align: left;">text-align: left</text>
 			<text class="common" style="text-align: center;">text-align: center</text>
 			<text class="common" style="text-align: right;">text-align: right</text>
@@ -14,7 +14,7 @@
 
 <style>
 	.common {
-		width: 500rpx;
+		width: 250px;
 		font-size: 20px;
 	}
 </style>
\ No newline at end of file

pages/CSS/text/text-decoration-line.uvue

 <template>
 	<view style="flex-grow: 1;">
-		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+		<view style="height: 250px;background-color: gray;justify-content: center;align-items: center;">
 			<text class="common" style="text-decoration-line: underline;">text-decoration-line: underline</text>
 			<text class="common" style="text-decoration-line: line-through;">text-decoration-line: line-through</text>
 		</view>

pages/CSS/text/text-overflow.uvue

 <template>
   <view style="flex-grow: 1;">
-    <view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+    <view style="height: 250px;background-color: gray;justify-content: center;align-items: center;">
       <text class="common" style="text-overflow: clip;white-space: normal;">{{text}}</text>
       <text class="common" style="text-overflow: clip;white-space: nowrap;">{{text}}</text>
       <text class="common" style="text-overflow: ellipsis;white-space: nowrap;">{{text}}</text>
@@ -20,8 +20,8 @@
 
 <style>
   .common {
-    width: 500rpx;
-    height: 60rpx;
+    width: 250px;
+    height: 30px;
     font-size: 20px;
   }
 </style>

pages/CSS/transition/transition.uvue

@@ -168,18 +168,18 @@
 
 <style>
   .container {
-    margin: 15rpx;
+    margin: 7px;
     background-color: white;
   }
 
   .text {
-    margin-top: 20rpx;
-    margin-bottom: 32rpx;
+    margin-top: 10px;
+    margin-bottom: 16px;
   }
 
   .base-style {
-    width: 400rpx;
-    height: 400rpx;
+    width: 200px;
+    height: 200px;
     background-color: brown;
   }