diff --git a/examples/useContext.html b/examples/useContext.html
index 56c78b2ce..a82442a72 100644
--- a/examples/useContext.html
+++ b/examples/useContext.html
@@ -7,6 +7,11 @@
     <link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css"/>
     <script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
 </head>
+<style>
+.my-parent {
+    --css-scale: 1;
+}
+</style>
 <body>
 <div id="wrapper"></div>
 <script>
@@ -14,7 +19,8 @@
     var Model = BI.inherit(BI.Model, {
         state: function () {
             return {
-                expand: false
+                expand: false,
+                cssScale: 2.0
             };
         },
         childContext: ["text"],
@@ -33,6 +39,18 @@
     });
     BI.model("demo.model", Model);
 
+    var oldFormat = BI.pixFormat;
+    BI.pixFormat = function (pix, border) {
+        var context = BI.useContext("cssScale");
+        if (!context) {
+            return oldFormat.apply(this, arguments);
+        }
+        if (!BI.isNumber(pix)) {
+            return pix;
+        }
+        return "calc(var(--css-scale) * " + pix + "px)";
+    };
+
     var Child = BI.inherit(BI.Widget, {
         render: function () {
             var label;
@@ -45,6 +63,7 @@
             // });
             return {
                 type: "bi.label",
+                height: 30,
                 ref: function (_ref) {
                     label = _ref;
                 },
@@ -60,6 +79,9 @@
     BI.shortcut("demo.child", Child);
 
     var Widget = BI.inherit(BI.Widget, {
+        props: {
+            baseCls: "my-parent"
+        },
         _store: function () {
             return BI.Models.getModel("demo.model");
         },
@@ -67,6 +89,7 @@
             var child;
             var store = BI.useStore();
             return function () {
+                this.element[0].style.setProperty('--css-scale', store.model.cssScale);
                 return {
                     type: "bi.vertical",
                     vgap: 20,
