diff --git a/src/base/collection/collection.js b/src/base/collection/collection.js
index baaedb78e..ca4511282 100644
--- a/src/base/collection/collection.js
+++ b/src/base/collection/collection.js
@@ -169,10 +169,10 @@ BI.CollectionView = BI.inherit(BI.Widget, {
                         this.renderedCells[index].el.setHeight(datum.height);
                     }
                     if (this.renderedCells[index]._left !== datum.x) {
-                        this.renderedCells[index].el.element.css("left", datum.x + "px");
+                        this.renderedCells[index].el.element.css("left", datum.x / BI.pixRatio + BI.pixUnit);
                     }
                     if (this.renderedCells[index]._top !== datum.y) {
-                        this.renderedCells[index].el.element.css("top", datum.y + "px");
+                        this.renderedCells[index].el.element.css("top", datum.y  / BI.pixRatio + BI.pixUnit);
                     }
                     renderedCells.push(child = this.renderedCells[index]);
                 } else {
diff --git a/src/base/grid/grid.js b/src/base/grid/grid.js
index 13231e59d..4c682ce3b 100644
--- a/src/base/grid/grid.js
+++ b/src/base/grid/grid.js
@@ -145,10 +145,10 @@ BI.GridView = BI.inherit(BI.Widget, {
                             this.renderedCells[index].el.setHeight(rowDatum.size);
                         }
                         if (this.renderedCells[index]._left !== columnDatum.offset + horizontalOffsetAdjustment) {
-                            this.renderedCells[index].el.element.css("left", (columnDatum.offset + horizontalOffsetAdjustment) + "px");
+                            this.renderedCells[index].el.element.css("left", (columnDatum.offset + horizontalOffsetAdjustment) / BI.pixRatio + BI.pixUnit);
                         }
                         if (this.renderedCells[index]._top !== rowDatum.offset + verticalOffsetAdjustment) {
-                            this.renderedCells[index].el.element.css("top", (rowDatum.offset + verticalOffsetAdjustment) + "px");
+                            this.renderedCells[index].el.element.css("top", (rowDatum.offset + verticalOffsetAdjustment) / BI.pixRatio + BI.pixUnit);
                         }
                         child = this.renderedCells[index].el;
                         renderedCells.push(this.renderedCells[index]);
diff --git a/src/base/layer/layer.popup.js b/src/base/layer/layer.popup.js
index ad9175c15..98ab2cf1d 100644
--- a/src/base/layer/layer.popup.js
+++ b/src/base/layer/layer.popup.js
@@ -52,8 +52,8 @@ BI.PopupView = BI.inherit(BI.Widget, {
             };
         this.element.css({
             "z-index": BI.zIndex_popup,
-            "min-width": o.minWidth + "px",
-            "max-width": o.maxWidth + "px"
+            "min-width": o.minWidth / BI.pixRatio + BI.pixUnit,
+            "max-width": o.maxWidth / BI.pixRatio + BI.pixUnit
         }).bind({click: fn});
 
         this.element.bind("mousewheel", fn);
@@ -95,7 +95,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
     _createView: function () {
         var o = this.options;
         this.button_group = BI.createWidget(o.el, {type: "bi.button_group", value: o.value});
-        this.button_group.element.css({"min-height": o.minHeight + "px", "padding-top": o.innerVGap + "px", "padding-bottom": o.innerVGap + "px"});
+        this.button_group.element.css({"min-height": o.minHeight / BI.pixRatio + BI.pixUnit, "padding-top": o.innerVGap / BI.pixRatio + BI.pixUnit, "padding-bottom": o.innerVGap + "px"});
         return this.button_group;
     },
 
@@ -158,7 +158,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
             toolHeight = ((this.tool && this.tool.attr("height")) || 24) * ((this.tool && this.tool.isVisible()) ? 1 : 0);
         var resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVGap;
         this.view.resetHeight ? this.view.resetHeight(resetHeight) :
-            this.view.element.css({"max-height": resetHeight + "px"});
+            this.view.element.css({"max-height": resetHeight / BI.pixRatio + BI.pixUnit});
     },
 
     setValue: function (selectedValues) {
@@ -171,4 +171,4 @@ BI.PopupView = BI.inherit(BI.Widget, {
     }
 });
 BI.PopupView.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.popup_view", BI.PopupView);
\ No newline at end of file
+BI.shortcut("bi.popup_view", BI.PopupView);
diff --git a/src/base/single/button/buttons/button.icon.js b/src/base/single/button/buttons/button.icon.js
index 62f9a5bd0..614e7d87e 100644
--- a/src/base/single/button/buttons/button.icon.js
+++ b/src/base/single/button/buttons/button.icon.js
@@ -25,7 +25,7 @@ BI.IconButton = BI.inherit(BI.BasicButton, {
             height: o.iconHeight
         });
         if (BI.isNumber(o.height) && o.height > 0 && BI.isNull(o.iconWidth) && BI.isNull(o.iconHeight)) {
-            this.element.css("lineHeight", o.height + "px");
+            this.element.css("lineHeight", o.height / BI.pixRatio + BI.pixUnit);
             BI.createWidget({
                 type: "bi.default",
                 element: this,
@@ -49,4 +49,4 @@ BI.IconButton = BI.inherit(BI.BasicButton, {
     }
 });
 BI.IconButton.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.icon_button", BI.IconButton);
\ No newline at end of file
+BI.shortcut("bi.icon_button", BI.IconButton);
diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js
index 2fcc76be6..05819b04f 100644
--- a/src/base/single/button/buttons/button.js
+++ b/src/base/single/button/buttons/button.js
@@ -44,11 +44,11 @@ BI.Button = BI.inherit(BI.BasicButton, {
         BI.Button.superclass._init.apply(this, arguments);
         var o = this.options, self = this;
         if (BI.isNumber(o.height) && !o.clear && !o.block) {
-            this.element.css({height: o.height + "px", lineHeight: (o.height - 2) + "px"});
+            this.element.css({height: o.height / BI.pixRatio + BI.pixUnit, lineHeight: (o.height - 2) / BI.pixRatio + BI.pixUnit});
         } else if (o.clear || o.block) {
-            this.element.css({lineHeight: o.height + "px"});
+            this.element.css({lineHeight: o.height / BI.pixRatio + BI.pixUnit});
         } else {
-            this.element.css({lineHeight: (o.height - 2) + "px"});
+            this.element.css({lineHeight: (o.height - 2) / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isKey(o.iconCls)) {
             this.icon = BI.createWidget({
@@ -106,7 +106,7 @@ BI.Button = BI.inherit(BI.BasicButton, {
             this.element.addClass("ghost");
         }
         if (o.minWidth > 0) {
-            this.element.css({"min-width": o.minWidth + "px"});
+            this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
         }
     },
 
diff --git a/src/base/single/html/html.js b/src/base/single/html/html.js
index 91cc3727a..af88bac2c 100644
--- a/src/base/single/html/html.js
+++ b/src/base/single/html/html.js
@@ -25,29 +25,29 @@ BI.Html = BI.inherit(BI.Single, {
         var self = this, o = this.options;
         if (o.hgap + o.lgap > 0) {
             this.element.css({
-                "padding-left": o.hgap + o.lgap + "px"
+                "padding-left": (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap > 0) {
             this.element.css({
-                "padding-right": o.hgap + o.rgap + "px"
+                "padding-right": (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.tgap > 0) {
             this.element.css({
-                "padding-top": o.vgap + o.tgap + "px"
+                "padding-top": (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap > 0) {
             this.element.css({
-                "padding-bottom": o.vgap + o.bgap + "px"
+                "padding-bottom": (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit
             });
         }
         if (BI.isNumber(o.height)) {
-            this.element.css({lineHeight: o.height + "px"});
+            this.element.css({lineHeight: o.height / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isNumber(o.lineHeight)) {
-            this.element.css({lineHeight: o.lineHeight + "px"});
+            this.element.css({lineHeight: o.lineHeight / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isWidthOrHeight(o.maxWidth)) {
             this.element.css({maxWidth: o.maxWidth});
@@ -111,4 +111,4 @@ BI.Html = BI.inherit(BI.Single, {
     }
 });
 
-BI.shortcut("bi.html", BI.Html);
\ No newline at end of file
+BI.shortcut("bi.html", BI.Html);
diff --git a/src/base/single/label/abstract.label.js b/src/base/single/label/abstract.label.js
index 9bf8b9a20..0835e57c0 100644
--- a/src/base/single/label/abstract.label.js
+++ b/src/base/single/label/abstract.label.js
@@ -101,7 +101,7 @@
                 }
                 if (BI.isNumber(o.height) && o.height > 0) { // 1.4
                     this.element.css({
-                        "line-height": o.height + "px"
+                        "line-height": o.height / BI.pixRatio + BI.pixUnit
                     });
                     json.textAlign = o.textAlign;
                     this.text = BI.createWidget(BI.extend(json, {
@@ -167,7 +167,7 @@
             }
             if (BI.isNumber(o.height) && o.height > 0) { // 1.8
                 this.element.css({
-                    "line-height": o.height + "px"
+                    "line-height": o.height / BI.pixRatio + BI.pixUnit
                 });
                 json.textAlign = o.textAlign;
                 this.text = BI.createWidget(BI.extend(json, {
@@ -253,7 +253,7 @@
                     }));
                     if (o.whiteSpace !== "normal") {
                         this.element.css({
-                            "line-height": o.height - (o.vgap * 2) + "px"
+                            "line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit
                         });
                     }
                     return;
@@ -300,7 +300,7 @@
             if (BI.isNumber(o.height) && o.height > 0) {
                 if (o.whiteSpace !== "normal") {
                     this.element.css({
-                        "line-height": o.height - (o.vgap * 2) + "px"
+                        "line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit
                     });
                 }
                 this.text = BI.createWidget(BI.extend(json, { // 2.6
diff --git a/src/base/single/label/icon.label.js b/src/base/single/label/icon.label.js
index f9e2e388a..a09a17266 100644
--- a/src/base/single/label/icon.label.js
+++ b/src/base/single/label/icon.label.js
@@ -23,7 +23,7 @@ BI.IconLabel = BI.inherit(BI.Single, {
             height: o.iconHeight
         });
         if (BI.isNumber(o.height) && o.height > 0 && BI.isNull(o.iconWidth) && BI.isNull(o.iconHeight)) {
-            this.element.css("lineHeight", o.height + "px");
+            this.element.css("lineHeight", o.height / BI.pixRatio + BI.pixUnit);
             BI.createWidget({
                 type: "bi.default",
                 element: this,
@@ -39,4 +39,4 @@ BI.IconLabel = BI.inherit(BI.Single, {
         }
     }
 });
-BI.shortcut("bi.icon_label", BI.IconLabel);
\ No newline at end of file
+BI.shortcut("bi.icon_label", BI.IconLabel);
diff --git a/src/base/single/text.js b/src/base/single/text.js
index d300c821f..b5adfb7c6 100644
--- a/src/base/single/text.js
+++ b/src/base/single/text.js
@@ -26,32 +26,32 @@
             var self = this, o = this.options;
             if (o.hgap + o.lgap > 0) {
                 this.element.css({
-                    "padding-left": o.hgap + o.lgap + "px"
+                    "padding-left": (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit
                 });
             }
             if (o.hgap + o.rgap > 0) {
                 this.element.css({
-                    "padding-right": o.hgap + o.rgap + "px"
+                    "padding-right": (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit
                 });
             }
             if (o.vgap + o.tgap > 0) {
                 this.element.css({
-                    "padding-top": o.vgap + o.tgap + "px"
+                    "padding-top": (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit
                 });
             }
             if (o.vgap + o.bgap > 0) {
                 this.element.css({
-                    "padding-bottom": o.vgap + o.bgap + "px"
+                    "padding-bottom": (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit
                 });
             }
             if (BI.isNumber(o.height)) {
-                this.element.css({lineHeight: o.height + "px"});
+                this.element.css({lineHeight: o.height / BI.pixRatio + BI.pixUnit});
             }
             if (BI.isNumber(o.lineHeight)) {
-                this.element.css({lineHeight: o.lineHeight + "px"});
+                this.element.css({lineHeight: o.lineHeight / BI.pixRatio + BI.pixUnit});
             }
             if (BI.isWidthOrHeight(o.maxWidth)) {
-                this.element.css({maxWidth: o.maxWidth});
+                this.element.css({maxWidth: o.maxWidth / BI.pixRatio + BI.pixUnit});
             }
             this.element.css({
                 textAlign: o.textAlign,
diff --git a/src/base/single/tip/tip.toast.js b/src/base/single/tip/tip.toast.js
index 99ae29dd3..0426f8d37 100644
--- a/src/base/single/tip/tip.toast.js
+++ b/src/base/single/tip/tip.toast.js
@@ -22,7 +22,7 @@ BI.Toast = BI.inherit(BI.Tip, {
         BI.Toast.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
         this.element.css({
-            minWidth: this._const.minWidth + "px"
+            minWidth: this._const.minWidth / BI.pixRatio + BI.pixUnit
         });
         this.element.addClass("toast-" + o.level);
         var fn = function (e) {
@@ -95,4 +95,4 @@ BI.Toast = BI.inherit(BI.Tip, {
     }
 });
 BI.Toast.EVENT_DESTORY = "EVENT_DESTORY";
-BI.shortcut("bi.toast", BI.Toast);
\ No newline at end of file
+BI.shortcut("bi.toast", BI.Toast);
diff --git a/src/case/list/list.select.js b/src/case/list/list.select.js
index 75637edc6..d654bb431 100644
--- a/src/case/list/list.select.js
+++ b/src/case/list/list.select.js
@@ -173,7 +173,7 @@ BI.SelectList = BI.inherit(BI.Widget, {
     resetHeight: function (h) {
         var toolHeight = ( this.toolbar.element.outerHeight() || 25) * ( this.toolbar.isVisible() ? 1 : 0);
         this.list.resetHeight ? this.list.resetHeight(h - toolHeight) :
-            this.list.element.css({"max-height": h - toolHeight + "px"});
+            this.list.element.css({"max-height": (h - toolHeight) / BI.pixRatio + BI.pixUnit});
     },
 
     setNotSelectedValue: function () {
@@ -214,4 +214,4 @@ BI.SelectList = BI.inherit(BI.Widget, {
     }
 });
 BI.SelectList.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.select_list", BI.SelectList);
\ No newline at end of file
+BI.shortcut("bi.select_list", BI.SelectList);
diff --git a/src/core/controller/controller.popover.js b/src/core/controller/controller.popover.js
index b35db5d4c..c9de3a29a 100644
--- a/src/core/controller/controller.popover.js
+++ b/src/core/controller/controller.popover.js
@@ -103,8 +103,8 @@ BI.PopoverController = BI.inherit(BI.Controller, {
                 top = 0;
             }
             popover.element.css({
-                left: left + "px",
-                top: top + "px"
+                left: left / BI.pixRatio + BI.pixUnit,
+                top: top / BI.pixRatio + BI.pixUnit
             });
         }
         return this;
@@ -153,4 +153,4 @@ BI.PopoverController = BI.inherit(BI.Controller, {
         this.zindexMap = {};
         return this;
     }
-});
\ No newline at end of file
+});
diff --git a/src/core/controller/controller.tooltips.js b/src/core/controller/controller.tooltips.js
index 13e6e7e07..8dd3e494a 100644
--- a/src/core/controller/controller.tooltips.js
+++ b/src/core/controller/controller.tooltips.js
@@ -99,8 +99,8 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
             !opt.belowMouse && (y = Math.max(y, top));
         }
         tooltip.element.css({
-            left: x < 0 ? 0 : x + "px",
-            top: y < 0 ? 0 : y + "px"
+            left: x < 0 ? 0 : x / BI.pixRatio + BI.pixUnit,
+            top: y < 0 ? 0 : y / BI.pixRatio + BI.pixUnit
         });
         tooltip.element.hover(function () {
             self.remove(name);
@@ -137,4 +137,4 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
         delete this.tooltipsManager[name];
         return this;
     }
-});
\ No newline at end of file
+});
diff --git a/src/core/var.js b/src/core/var.js
index 1f933e7c1..e534f7d14 100644
--- a/src/core/var.js
+++ b/src/core/var.js
@@ -12,6 +12,8 @@ _.extend(BI, {
     zIndex_masker: 1e8,
     zIndex_tip: 1e9,
     emptyStr: "",
+    pixUnit: "px",
+    pixRatio: 1,
     emptyFn: function () {
     },
     empty: null,
@@ -134,4 +136,4 @@ _.extend(BI, {
         Stretch: "stretch"
     },
     StartOfWeek: 1
-});
\ No newline at end of file
+});
diff --git a/src/core/widget.js b/src/core/widget.js
index 8c476e231..d9b52911f 100644
--- a/src/core/widget.js
+++ b/src/core/widget.js
@@ -148,14 +148,14 @@
         _initElementWidth: function () {
             var o = this.options;
             if (BI.isWidthOrHeight(o.width)) {
-                this.element.css("width", o.width);
+                this.element.css("width", BI.isNumber(o.width) ? o.width / BI.pixRatio + BI.pixUnit : o.width);
             }
         },
 
         _initElementHeight: function () {
             var o = this.options;
             if (BI.isWidthOrHeight(o.height)) {
-                this.element.css("height", o.height);
+                this.element.css("height", BI.isNumber(o.height) ? o.height / BI.pixRatio + BI.pixUnit : o.height);
             }
         },
 
diff --git a/src/core/wrapper/layout.js b/src/core/wrapper/layout.js
index 32f470242..5d4fdc470 100644
--- a/src/core/wrapper/layout.js
+++ b/src/core/wrapper/layout.js
@@ -25,16 +25,16 @@ BI.Layout = BI.inherit(BI.Widget, {
 
     _init4Margin: function () {
         if (this.options.top) {
-            this.element.css("top", this.options.top);
+            this.element.css("top", BI.isNumber(this.options.top) ? this.options.top / BI.pixRatio + BI.pixUnit : this.options.top);
         }
         if (this.options.left) {
-            this.element.css("left", this.options.left);
+            this.element.css("left", BI.isNumber(this.options.left) ? this.options.left / BI.pixRatio + BI.pixUnit : this.options.left);
         }
         if (this.options.bottom) {
-            this.element.css("bottom", this.options.bottom);
+            this.element.css("bottom", BI.isNumber(this.options.bottom) ? this.options.bottom / BI.pixRatio + BI.pixUnit : this.options.bottom);
         }
         if (this.options.right) {
-            this.element.css("right", this.options.right);
+            this.element.css("right", BI.isNumber(this.options.right) ? this.options.right / BI.pixRatio + BI.pixUnit : this.options.right);
         }
     },
 
diff --git a/src/core/wrapper/layout/adapt/absolute.center.js b/src/core/wrapper/layout/adapt/absolute.center.js
index 28fecc26a..a808f53c2 100644
--- a/src/core/wrapper/layout/adapt/absolute.center.js
+++ b/src/core/wrapper/layout/adapt/absolute.center.js
@@ -26,10 +26,10 @@ BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, {
         var w = BI.AbsoluteCenterLayout.superclass._addElement.apply(this, arguments);
         w.element.css({
             position: "absolute",
-            left: o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0),
-            right: o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0),
-            top: o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0),
-            bottom: o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0),
+            left: (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit,
+            right: (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit,
+            top: (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit,
+            bottom: (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit,
             margin: "auto"
         });
         return w;
@@ -44,4 +44,4 @@ BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.absolute_center_adapt", BI.AbsoluteCenterLayout);
\ No newline at end of file
+BI.shortcut("bi.absolute_center_adapt", BI.AbsoluteCenterLayout);
diff --git a/src/core/wrapper/layout/adapt/absolute.horizontal.js b/src/core/wrapper/layout/adapt/absolute.horizontal.js
index 62029c993..d7e9c6f04 100644
--- a/src/core/wrapper/layout/adapt/absolute.horizontal.js
+++ b/src/core/wrapper/layout/adapt/absolute.horizontal.js
@@ -26,15 +26,15 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
         var w = BI.AbsoluteHorizontalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({
             position: "absolute",
-            left: o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0),
-            right: o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0),
+            left: (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit,
+            right: (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit,
             margin: "auto"
         });
         if (o.vgap + o.tgap + (item.vgap || 0) + (item.tgap || 0) !== 0) {
-            w.element.css("top", o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0));
+            w.element.css("top", (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit);
         }
         if (o.vgap + o.bgap + (item.vgap || 0) + (item.bgap || 0) !== 0) {
-            w.element.css("bottom", o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0));
+            w.element.css("bottom", (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit);
         }
         return w;
     },
@@ -48,4 +48,4 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.absolute_horizontal_adapt", BI.AbsoluteHorizontalLayout);
\ No newline at end of file
+BI.shortcut("bi.absolute_horizontal_adapt", BI.AbsoluteHorizontalLayout);
diff --git a/src/core/wrapper/layout/adapt/absolute.vertical.js b/src/core/wrapper/layout/adapt/absolute.vertical.js
index c90a54b5a..3fd98837d 100644
--- a/src/core/wrapper/layout/adapt/absolute.vertical.js
+++ b/src/core/wrapper/layout/adapt/absolute.vertical.js
@@ -26,17 +26,17 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
         var w = BI.AbsoluteVerticalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({
             position: "absolute",
-            left: item.lgap,
-            right: item.rgap,
-            top: o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0),
-            bottom: o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0),
+            left: item.lgap / BI.pixRatio + BI.pixUnit,
+            right: item.rgap / BI.pixRatio + BI.pixUnit,
+            top: (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit,
+            bottom: (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit,
             margin: "auto"
         });
         if (o.hgap + o.lgap + (item.hgap || 0) + (item.lgap || 0) !== 0) {
-            w.element.css("left", o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0));
+            w.element.css("left", (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit);
         }
         if (o.hgap + o.rgap + (item.hgap || 0) + (item.rgap || 0) !== 0) {
-            w.element.css("right", o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0));
+            w.element.css("right", (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit);
         }
         return w;
     },
@@ -50,4 +50,4 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.absolute_vertical_adapt", BI.AbsoluteVerticalLayout);
\ No newline at end of file
+BI.shortcut("bi.absolute_vertical_adapt", BI.AbsoluteVerticalLayout);
diff --git a/src/core/wrapper/layout/adapt/adapt.table.js b/src/core/wrapper/layout/adapt/adapt.table.js
index c391a156b..106b8f403 100644
--- a/src/core/wrapper/layout/adapt/adapt.table.js
+++ b/src/core/wrapper/layout/adapt/adapt.table.js
@@ -35,7 +35,7 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
     _addElement: function (i, item) {
         var o = this.options;
         var td;
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
+        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit);
         if (!this.hasWidget(this._getChildName(i))) {
             var w = BI._lazyCreateWidget(item);
             w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
@@ -53,7 +53,7 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
         // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
         // 2、不能给多个td设置最大宽度，这样只会平分宽度
         // 3、多百分比宽度就算了
-        td.element.css({"max-width": o.columnSize[i] <= 1 ? width : width + "px"});
+        td.element.css({"max-width": o.columnSize[i] <= 1 ? width : width / BI.pixRatio + BI.pixUnit});
         if (i === 0) {
             td.element.addClass("first-element");
         }
@@ -67,22 +67,22 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
         });
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+                "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+                "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return td;
diff --git a/src/core/wrapper/layout/adapt/auto.horizontal.js b/src/core/wrapper/layout/adapt/auto.horizontal.js
index fd75945a5..4483dde7f 100644
--- a/src/core/wrapper/layout/adapt/auto.horizontal.js
+++ b/src/core/wrapper/layout/adapt/auto.horizontal.js
@@ -30,22 +30,22 @@ BI.HorizontalAutoLayout = BI.inherit(BI.Layout, {
         });
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+                "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
+                "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
@@ -60,4 +60,4 @@ BI.HorizontalAutoLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.horizontal_auto", BI.HorizontalAutoLayout);
\ No newline at end of file
+BI.shortcut("bi.horizontal_auto", BI.HorizontalAutoLayout);
diff --git a/src/core/wrapper/layout/adapt/inline.center.js b/src/core/wrapper/layout/adapt/inline.center.js
index 9e0ea3ab2..d81256a0a 100644
--- a/src/core/wrapper/layout/adapt/inline.center.js
+++ b/src/core/wrapper/layout/adapt/inline.center.js
@@ -38,29 +38,29 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
         var o = this.options;
         var w = BI.InlineCenterAdaptLayout.superclass._addElement.apply(this, arguments);
         w.element.css({
-            width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i],
+            width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit),
             position: "relative",
             "vertical-align": o.verticalAlign
         });
         w.element.addClass("inline-center-adapt-item");
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+                "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+                "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0))
             });
         }
         return w;
diff --git a/src/core/wrapper/layout/adapt/inline.horizontal.js b/src/core/wrapper/layout/adapt/inline.horizontal.js
index f079bc99a..1553ee89b 100644
--- a/src/core/wrapper/layout/adapt/inline.horizontal.js
+++ b/src/core/wrapper/layout/adapt/inline.horizontal.js
@@ -38,29 +38,29 @@ BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
         var o = this.options;
         var w = BI.InlineHorizontalAdaptLayout.superclass._addElement.apply(this, arguments);
         w.element.css({
-            width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i],
+            width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit),
             position: "relative",
             "vertical-align": o.verticalAlign
         });
         w.element.addClass("inline-horizontal-adapt-item");
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+                "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+                "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
diff --git a/src/core/wrapper/layout/adapt/inline.vertical.js b/src/core/wrapper/layout/adapt/inline.vertical.js
index 290cc5ade..ef960c130 100644
--- a/src/core/wrapper/layout/adapt/inline.vertical.js
+++ b/src/core/wrapper/layout/adapt/inline.vertical.js
@@ -38,29 +38,29 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
         var o = this.options;
         var w = BI.InlineVerticalAdaptLayout.superclass._addElement.apply(this, arguments);
         w.element.css({
-            width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i],
+            width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit),
             position: "relative",
             "vertical-align": o.verticalAlign
         });
         w.element.addClass("inline-vertical-adapt-item");
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+                "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+                "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js
index 549778110..c3b5aaeb1 100644
--- a/src/core/wrapper/layout/flex/flex.horizontal.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.js
@@ -40,29 +40,29 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
             });
         }
         if (o.columnSize[i] > 0) {
-            w.element.width(o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i]);
+            w.element.width(o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit));
         }
         if (o.columnSize[i] === "fill") {
             w.element.css("flex", "1");
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+                "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+                "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js
index 9790bcd9b..8660ff3fd 100644
--- a/src/core/wrapper/layout/flex/flex.vertical.js
+++ b/src/core/wrapper/layout/flex/flex.vertical.js
@@ -39,29 +39,29 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
             });
         }
         if (o.rowSize[i] > 0) {
-            w.element.height(o.rowSize[i] <= 1 ? (o.rowSize[i] * 100 + "%") : o.rowSize[i]);
+            w.element.height(o.rowSize[i] <= 1 ? (o.rowSize[i] * 100 + "%") : (o.rowSize[i] / BI.pixRatio + BI.pixUnit));
         }
         if (o.rowSize[i] === "fill") {
             w.element.css("flex", "1");
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+                "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+                "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
index 13e9e3088..738362626 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
@@ -41,29 +41,29 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
             });
         }
         if (o.columnSize[i] > 0) {
-            w.element.width(o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i]);
+            w.element.width(o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit));
         }
         if (o.columnSize[i] === "fill") {
             w.element.css("flex", "1");
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+                "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+                "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
index ee463f8e4..2809f38f1 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
@@ -41,29 +41,29 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
             });
         }
         if (o.rowSize[i] > 0) {
-            w.element.height(o.rowSize[i] <= 1 ? (o.rowSize[i] * 100 + "%") : o.rowSize[i]);
+            w.element.height(o.rowSize[i] <= 1 ? (o.rowSize[i] * 100 + "%") : (o.rowSize[i] / BI.pixRatio + BI.pixUnit));
         }
         if (o.rowSize[i] === "fill") {
             w.element.css("flex", "1");
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+                "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+                "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
diff --git a/src/core/wrapper/layout/layout.absolute.js b/src/core/wrapper/layout/layout.absolute.js
index 2f39d1fd0..9bf01600f 100644
--- a/src/core/wrapper/layout/layout.absolute.js
+++ b/src/core/wrapper/layout/layout.absolute.js
@@ -25,58 +25,58 @@ BI.AbsoluteLayout = BI.inherit(BI.Layout, {
         var w = BI.AbsoluteLayout.superclass._addElement.apply(this, arguments);
         var left = 0, right = 0, top = 0, bottom = 0;
         if (BI.isNotNull(item.left)) {
-            w.element.css({left: item.left});
+            w.element.css({left: item.left / BI.pixRatio + BI.pixUnit});
             left += item.left;
         }
         if (BI.isNotNull(item.right)) {
-            w.element.css({right: item.right});
+            w.element.css({right: item.right / BI.pixRatio + BI.pixUnit});
             right += item.right;
         }
         if (BI.isNotNull(item.top)) {
-            w.element.css({top: item.top});
+            w.element.css({top: item.top / BI.pixRatio + BI.pixUnit});
             top += item.top;
         }
         if (BI.isNotNull(item.bottom)) {
-            w.element.css({bottom: item.bottom});
+            w.element.css({bottom: item.bottom / BI.pixRatio + BI.pixUnit});
             bottom += item.bottom;
         }
 
         if (BI.isNotNull(o.hgap)) {
             left += o.hgap;
-            w.element.css({left: left});
+            w.element.css({left: left / BI.pixRatio + BI.pixUnit});
             right += o.hgap;
-            w.element.css({right: right});
+            w.element.css({right: right / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isNotNull(o.vgap)) {
             top += o.vgap;
-            w.element.css({top: top});
+            w.element.css({top: top / BI.pixRatio + BI.pixUnit});
             bottom += o.vgap;
-            w.element.css({bottom: bottom});
+            w.element.css({bottom: bottom / BI.pixRatio + BI.pixUnit});
         }
 
         if (BI.isNotNull(o.lgap)) {
             left += o.lgap;
-            w.element.css({left: left});
+            w.element.css({left: left / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isNotNull(o.rgap)) {
             right += o.rgap;
-            w.element.css({right: right});
+            w.element.css({right: right / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isNotNull(o.tgap)) {
             top += o.tgap;
-            w.element.css({top: top});
+            w.element.css({top: top / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isNotNull(o.bgap)) {
             bottom += o.bgap;
-            w.element.css({bottom: bottom});
+            w.element.css({bottom: bottom / BI.pixRatio + BI.pixUnit});
         }
 
 
         if (BI.isNotNull(item.width)) {
-            w.element.css({width: item.width});
+            w.element.css({width: item.width / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isNotNull(item.height)) {
-            w.element.css({height: item.height});
+            w.element.css({height: item.height / BI.pixRatio + BI.pixUnit});
         }
         w.element.css({position: "absolute"});
         return w;
@@ -104,4 +104,4 @@ BI.AbsoluteLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.absolute", BI.AbsoluteLayout);
\ No newline at end of file
+BI.shortcut("bi.absolute", BI.AbsoluteLayout);
diff --git a/src/core/wrapper/layout/layout.adaptive.js b/src/core/wrapper/layout/layout.adaptive.js
index cc37f3c6a..76c3a6ce8 100644
--- a/src/core/wrapper/layout/layout.adaptive.js
+++ b/src/core/wrapper/layout/layout.adaptive.js
@@ -22,60 +22,60 @@ BI.AdaptiveLayout = BI.inherit(BI.Layout, {
         var left = 0, right = 0, top = 0, bottom = 0;
         if (BI.isNotNull(item.left)) {
             w.element.css({
-                left: item.left
+                left: item.left / BI.pixRatio + BI.pixUnit
             });
         }
         if (BI.isNotNull(item.right)) {
             w.element.css({
-                right: item.right
+                right: item.right / BI.pixRatio + BI.pixUnit
             });
         }
         if (BI.isNotNull(item.top)) {
             w.element.css({
-                top: item.top
+                top: item.top / BI.pixRatio + BI.pixUnit
             });
         }
         if (BI.isNotNull(item.bottom)) {
             w.element.css({
-                bottom: item.bottom
+                bottom: item.bottom / BI.pixRatio + BI.pixUnit
             });
         }
 
         if (BI.isNotNull(o.hgap)) {
             left += o.hgap;
-            w.element.css({"margin-left": left});
+            w.element.css({"margin-left": left / BI.pixRatio + BI.pixUnit});
             right += o.hgap;
-            w.element.css({"margin-right": right});
+            w.element.css({"margin-right": right / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isNotNull(o.vgap)) {
             top += o.vgap;
-            w.element.css({"margin-top": top});
+            w.element.css({"margin-top": top / BI.pixRatio + BI.pixUnit});
             bottom += o.vgap;
-            w.element.css({"margin-bottom": bottom});
+            w.element.css({"margin-bottom": bottom / BI.pixRatio + BI.pixUnit});
         }
 
         if (BI.isNotNull(o.lgap)) {
             left += o.lgap;
-            w.element.css({"margin-left": left});
+            w.element.css({"margin-left": left / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isNotNull(o.rgap)) {
             right += o.rgap;
-            w.element.css({"margin-right": right});
+            w.element.css({"margin-right": right / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isNotNull(o.tgap)) {
             top += o.tgap;
-            w.element.css({"margin-top": top});
+            w.element.css({"margin-top": top / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isNotNull(o.bgap)) {
             bottom += o.bgap;
-            w.element.css({"margin-bottom": bottom});
+            w.element.css({"margin-bottom": bottom / BI.pixRatio + BI.pixUnit});
         }
 
         if (BI.isNotNull(item.width)) {
-            w.element.css({width: item.width});
+            w.element.css({width: item.width / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isNotNull(item.height)) {
-            w.element.css({height: item.height});
+            w.element.css({height: item.height / BI.pixRatio + BI.pixUnit});
         }
         return w;
     },
@@ -89,4 +89,4 @@ BI.AdaptiveLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.adaptive", BI.AdaptiveLayout);
\ No newline at end of file
+BI.shortcut("bi.adaptive", BI.AdaptiveLayout);
diff --git a/src/core/wrapper/layout/layout.border.js b/src/core/wrapper/layout/layout.border.js
index 77702f8b1..a6a412a51 100644
--- a/src/core/wrapper/layout/layout.border.js
+++ b/src/core/wrapper/layout/layout.border.js
@@ -39,12 +39,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                         var w = BI._lazyCreateWidget(item);
                         this.addWidget(this._getChildName("north"), w);
                     }
-                    this.getWidgetByName(this._getChildName("north")).element.height(item.height)
+                    this.getWidgetByName(this._getChildName("north")).element.height(item.height / BI.pixRatio + BI.pixUnit)
                         .css({
                             position: "absolute",
-                            top: (item.top || 0),
-                            left: (item.left || 0),
-                            right: (item.right || 0),
+                            top: (item.top || 0) / BI.pixRatio + BI.pixUnit,
+                            left: (item.left || 0) / BI.pixRatio + BI.pixUnit,
+                            right: (item.right || 0) / BI.pixRatio + BI.pixUnit,
                             bottom: "initial"
                         });
                 }
@@ -59,12 +59,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                         var w = BI._lazyCreateWidget(item);
                         this.addWidget(this._getChildName("south"), w);
                     }
-                    this.getWidgetByName(this._getChildName("south")).element.height(item.height)
+                    this.getWidgetByName(this._getChildName("south")).element.height(item.height / BI.pixRatio + BI.pixUnit)
                         .css({
                             position: "absolute",
-                            bottom: (item.bottom || 0),
-                            left: (item.left || 0),
-                            right: (item.right || 0),
+                            bottom: (item.bottom || 0) / BI.pixRatio + BI.pixUnit,
+                            left: (item.left || 0) / BI.pixRatio + BI.pixUnit,
+                            right: (item.right || 0) / BI.pixRatio + BI.pixUnit,
                             top: "initial"
                         });
                 }
@@ -79,12 +79,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                         var w = BI._lazyCreateWidget(item);
                         this.addWidget(this._getChildName("west"), w);
                     }
-                    this.getWidgetByName(this._getChildName("west")).element.width(item.width)
+                    this.getWidgetByName(this._getChildName("west")).element.width(item.width / BI.pixRatio + BI.pixUnit)
                         .css({
                             position: "absolute",
-                            left: (item.left || 0),
-                            top: top,
-                            bottom: bottom,
+                            left: (item.left || 0) / BI.pixRatio + BI.pixUnit,
+                            top: top / BI.pixRatio + BI.pixUnit,
+                            bottom: bottom / BI.pixRatio + BI.pixUnit,
                             right: "initial"
                         });
                 }
@@ -99,12 +99,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                         var w = BI._lazyCreateWidget(item);
                         this.addWidget(this._getChildName("east"), w);
                     }
-                    this.getWidgetByName(this._getChildName("east")).element.width(item.width)
+                    this.getWidgetByName(this._getChildName("east")).element.width(item.width / BI.pixRatio + BI.pixUnit)
                         .css({
                             position: "absolute",
-                            right: (item.right || 0),
-                            top: top,
-                            bottom: bottom,
+                            right: (item.right || 0) / BI.pixRatio + BI.pixUnit,
+                            top: top / BI.pixRatio + BI.pixUnit,
+                            bottom: bottom / BI.pixRatio + BI.pixUnit,
                             left: "initial"
                         });
                 }
@@ -119,7 +119,13 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                     this.addWidget(this._getChildName("center"), w);
                 }
                 this.getWidgetByName(this._getChildName("center")).element
-                    .css({position: "absolute", top: top, bottom: bottom, left: left, right: right});
+                    .css({
+                        position: "absolute",
+                        top: top / BI.pixRatio + BI.pixUnit,
+                        bottom: bottom / BI.pixRatio + BI.pixUnit,
+                        left: left / BI.pixRatio + BI.pixUnit,
+                        right: right / BI.pixRatio + BI.pixUnit
+                    });
             }
         }
     },
diff --git a/src/core/wrapper/layout/layout.default.js b/src/core/wrapper/layout/layout.default.js
index 3f5e85030..6553245c4 100644
--- a/src/core/wrapper/layout/layout.default.js
+++ b/src/core/wrapper/layout/layout.default.js
@@ -26,22 +26,22 @@ BI.DefaultLayout = BI.inherit(BI.Layout, {
         var w = BI.DefaultLayout.superclass._addElement.apply(this, arguments);
         if (o.vgap + o.tgap + (item.tgap || 0) !== 0) {
             w.element.css({
-                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + "px"
+                "margin-top": (o.vgap + o.tgap + (item.tgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) !== 0) {
             w.element.css({
-                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + "px"
+                "margin-left": (o.hgap + o.lgap + (item.lgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) !== 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + "px"
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
@@ -56,4 +56,4 @@ BI.DefaultLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.default", BI.DefaultLayout);
\ No newline at end of file
+BI.shortcut("bi.default", BI.DefaultLayout);
diff --git a/src/core/wrapper/layout/layout.flow.js b/src/core/wrapper/layout/layout.flow.js
index 7b7d15638..f93c5a932 100644
--- a/src/core/wrapper/layout/layout.flow.js
+++ b/src/core/wrapper/layout/layout.flow.js
@@ -29,35 +29,35 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
         var w = BI.FloatLeftLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative", float: "left"});
         if (BI.isNotNull(item.left)) {
-            w.element.css({left: item.left});
+            w.element.css({left: item.left / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isNotNull(item.right)) {
-            w.element.css({right: item.right});
+            w.element.css({right: item.right / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isNotNull(item.top)) {
-            w.element.css({top: item.top});
+            w.element.css({top: item.top / BI.pixRatio + BI.pixUnit});
         }
         if (BI.isNotNull(item.bottom)) {
-            w.element.css({bottom: item.bottom});
+            w.element.css({bottom: item.bottom / BI.pixRatio + BI.pixUnit});
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+                "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
+                "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
@@ -118,22 +118,22 @@ BI.FloatRightLayout = BI.inherit(BI.Layout, {
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+                "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
+                "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": (i === 0 ? o.hgap : 0) + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+                "margin-right": ((i === 0 ? o.hgap : 0) + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
@@ -148,4 +148,4 @@ BI.FloatRightLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.right", BI.FloatRightLayout);
\ No newline at end of file
+BI.shortcut("bi.right", BI.FloatRightLayout);
diff --git a/src/core/wrapper/layout/layout.horizontal.js b/src/core/wrapper/layout/layout.horizontal.js
index 8008ef57d..c75dd97a5 100644
--- a/src/core/wrapper/layout/layout.horizontal.js
+++ b/src/core/wrapper/layout/layout.horizontal.js
@@ -60,7 +60,7 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
         // 2、不能给多个td设置最大宽度，这样只会平分宽度
         // 3、多百分比宽度就算了
-        td.element.css({"max-width": o.columnSize[i] <= 1 ? width : width + "px"});
+        td.element.css({"max-width": o.columnSize[i] <= 1 ? width : width / BI.pixRatio + BI.pixUnit});
         if (i === 0) {
             td.element.addClass("first-element");
         }
@@ -74,22 +74,22 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
 
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+                "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+                "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return td;
@@ -145,22 +145,22 @@ BI.HorizontalCellLayout = BI.inherit(BI.Layout, {
         w.element.css({position: "relative", display: "table-cell", "vertical-align": "middle"});
         if (o.hgap + o.lgap > 0) {
             w.element.css({
-                "margin-left": o.hgap + o.lgap + "px"
+                "margin-left": (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap > 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + "px"
+                "margin-right": (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.tgap > 0) {
             w.element.css({
-                "margin-top": o.vgap + o.tgap + "px"
+                "margin-top": (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap > 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + "px"
+                "margin-bottom": (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
diff --git a/src/core/wrapper/layout/layout.inline.js b/src/core/wrapper/layout/layout.inline.js
index 34192cb93..06a79a4cd 100644
--- a/src/core/wrapper/layout/layout.inline.js
+++ b/src/core/wrapper/layout/layout.inline.js
@@ -32,22 +32,22 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
         w.element.css({"position": "relative", display: "inline-block", "*display": "inline", "*zoom": 1});
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+                "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
+                "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
@@ -62,4 +62,4 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.inline", BI.InlineLayout);
\ No newline at end of file
+BI.shortcut("bi.inline", BI.InlineLayout);
diff --git a/src/core/wrapper/layout/layout.table.js b/src/core/wrapper/layout/layout.table.js
index 3820ed99c..69757277a 100644
--- a/src/core/wrapper/layout/layout.table.js
+++ b/src/core/wrapper/layout/layout.table.js
@@ -79,8 +79,8 @@ BI.TableLayout = BI.inherit(BI.Layout, {
                 abs.push(BI.extend({
                     top: 0,
                     bottom: 0,
-                    left: o.columnSize[i] <= 1 ? left * 100 + "%" : left,
-                    width: o.columnSize[i] <= 1 ? o.columnSize[i] * 100 + "%" : o.columnSize[i]
+                    left: o.columnSize[i] <= 1 ? left * 100 + "%" : left / BI.pixRatio + BI.pixUnit,
+                    width: o.columnSize[i] <= 1 ? o.columnSize[i] * 100 + "%" : o.columnSize[i] / BI.pixRatio + BI.pixUnit
                 }, arr[i]));
                 left += o.columnSize[i] + (o.columnSize[i] < 1 ? 0 : o.hgap);
             } else {
@@ -93,8 +93,8 @@ BI.TableLayout = BI.inherit(BI.Layout, {
                 abs.push(BI.extend({
                     top: 0,
                     bottom: 0,
-                    right: o.columnSize[j] <= 1 ? right * 100 + "%" : right,
-                    width: o.columnSize[j] <= 1 ? o.columnSize[j] * 100 + "%" : o.columnSize[j]
+                    right: o.columnSize[j] <= 1 ? right * 100 + "%" : right / BI.pixRatio + BI.pixUnit,
+                    width: o.columnSize[j] <= 1 ? o.columnSize[j] * 100 + "%" : o.columnSize[j] / BI.pixRatio + BI.pixUnit
                 }, arr[j]));
                 right += o.columnSize[j] + (o.columnSize[j] < 1 ? 0 : o.hgap);
             } else {
@@ -106,18 +106,18 @@ BI.TableLayout = BI.inherit(BI.Layout, {
             abs.push(BI.extend({
                 top: 0,
                 bottom: 0,
-                left: left <= 1 ? left * 100 + "%" : left,
-                right: right <= 1 ? right * 100 + "%" : right
+                left: left <= 1 ? left * 100 + "%" : left / BI.pixRatio + BI.pixUnit,
+                right: right <= 1 ? right * 100 + "%" : right / BI.pixRatio + BI.pixUnit
             }, arr[i]));
         }
         var w = BI._lazyCreateWidget({
             type: "bi.absolute",
-            height: BI.isArray(o.rowSize) ? o.rowSize[this.rows] : o.rowSize,
+            height: (BI.isArray(o.rowSize) ? o.rowSize[this.rows] : o.rowSize) / BI.pixRatio + BI.pixUnit,
             items: abs
         });
         if (this.rows > 0) {
             this.getWidgetByName(this._getChildName(this.rows - 1)).element.css({
-                "margin-bottom": o.vgap
+                "margin-bottom": o.vgap / BI.pixRatio + BI.pixUnit
             });
         }
         w.element.css({
diff --git a/src/core/wrapper/layout/layout.tape.js b/src/core/wrapper/layout/layout.tape.js
index 0ac780665..bdb168474 100644
--- a/src/core/wrapper/layout/layout.tape.js
+++ b/src/core/wrapper/layout/layout.tape.js
@@ -52,7 +52,11 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
             } else {
                 w = self.getWidgetByName(self._getChildName(i));
             }
-            w.element.css({position: "absolute", top: (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap + "px", bottom: (item.bgap || 0) + (item.vgap || 0) + o.vgap + o.bgap + "px"});
+            w.element.css({
+                position: "absolute",
+                top: ((item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
+                bottom: ((item.bgap || 0) + (item.vgap || 0) + o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit
+            });
         });
 
         var left = {}, right = {};
@@ -68,8 +72,8 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
                 w.element.css({left: left[i] * 100 + "%", width: item.width * 100 + "%"});
             } else {
                 w.element.css({
-                    left: left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap + "px",
-                    width: BI.isNumber(item.width) ? item.width : ""
+                    left: (left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
+                    width: BI.isNumber(item.width) ? item.width / BI.pixRatio + BI.pixUnit : ""
                 });
             }
             if (!BI.isNumber(item.width)) {
@@ -85,8 +89,8 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
                 w.element.css({right: right[i] * 100 + "%", width: item.width * 100 + "%"});
             } else {
                 w.element.css({
-                    right: right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap + "px",
-                    width: BI.isNumber(item.width) ? item.width : ""
+                    right: (right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
+                    width: BI.isNumber(item.width) ? item.width / BI.pixRatio + BI.pixUnit : ""
                 });
             }
             if (!BI.isNumber(item.width)) {
@@ -165,7 +169,11 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
             } else {
                 w = self.getWidgetByName(self._getChildName(i));
             }
-            w.element.css({position: "absolute", left: (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap + "px", right: + (item.hgap || 0) + (item.rgap || 0) + o.hgap + o.rgap + "px"});
+            w.element.css({
+                position: "absolute",
+                left: ((item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
+                right: +((item.hgap || 0) + (item.rgap || 0) + o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit
+            });
         });
 
         var top = {}, bottom = {};
@@ -181,8 +189,8 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
                 w.element.css({top: top[i] * 100 + "%", height: item.height * 100 + "%"});
             } else {
                 w.element.css({
-                    top: top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap + "px",
-                    height: BI.isNumber(item.height) ? item.height : ""
+                    top: (top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
+                    height: BI.isNumber(item.height) ? item.height / BI.pixRatio + BI.pixUnit : ""
                 });
             }
             if (!BI.isNumber(item.height)) {
@@ -198,8 +206,8 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
                 w.element.css({bottom: bottom[i] * 100 + "%", height: item.height * 100 + "%"});
             } else {
                 w.element.css({
-                    bottom: bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap + "px",
-                    height: BI.isNumber(item.height) ? item.height : ""
+                    bottom: (bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
+                    height: BI.isNumber(item.height) ? item.height / BI.pixRatio + BI.pixUnit : ""
                 });
             }
             if (!BI.isNumber(item.height)) {
diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js
index ccc2feb25..05acf721f 100644
--- a/src/core/wrapper/layout/layout.td.js
+++ b/src/core/wrapper/layout/layout.td.js
@@ -86,22 +86,22 @@ BI.TdLayout = BI.inherit(BI.Layout, {
             var w = BI._lazyCreateWidget(arr[i]);
             w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
             if (arr[i].lgap) {
-                w.element.css({"margin-left": arr[i].lgap + "px"});
+                w.element.css({"margin-left": arr[i].lgap / BI.pixRatio + BI.pixUnit});
             }
             if (arr[i].rgap) {
-                w.element.css({"margin-right": arr[i].rgap + "px"});
+                w.element.css({"margin-right": arr[i].rgap / BI.pixRatio + BI.pixUnit});
             }
             if (arr[i].tgap) {
-                w.element.css({"margin-top": arr[i].tgap + "px"});
+                w.element.css({"margin-top": arr[i].tgap / BI.pixRatio + BI.pixUnit});
             }
             if (arr[i].bgap) {
-                w.element.css({"margin-bottom": arr[i].bgap + "px"});
+                w.element.css({"margin-bottom": arr[i].bgap / BI.pixRatio + BI.pixUnit});
             }
             first(w, this.rows++, i);
             var td = BI._lazyCreateWidget({
                 type: "bi.default",
                 attributes: {
-                    width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i]
+                    width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i] / BI.pixRatio + BI.pixUnit
                 },
                 tagName: "td",
                 items: [w]
diff --git a/src/core/wrapper/layout/layout.vertical.js b/src/core/wrapper/layout/layout.vertical.js
index 72f1813f3..58f8c7548 100644
--- a/src/core/wrapper/layout/layout.vertical.js
+++ b/src/core/wrapper/layout/layout.vertical.js
@@ -29,22 +29,22 @@ BI.VerticalLayout = BI.inherit(BI.Layout, {
         });
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+                "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
+                "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
@@ -59,4 +59,4 @@ BI.VerticalLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.vertical", BI.VerticalLayout);
\ No newline at end of file
+BI.shortcut("bi.vertical", BI.VerticalLayout);
diff --git a/src/core/wrapper/layout/layout.window.js b/src/core/wrapper/layout/layout.window.js
index 1a5ddd144..7f40b6b74 100644
--- a/src/core/wrapper/layout/layout.window.js
+++ b/src/core/wrapper/layout/layout.window.js
@@ -114,9 +114,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
                 if (BI.isNull(top[i])) {
                     top[i] = top[i - 1] + (o.rowSize[i - 1] < 1 ? o.rowSize[i - 1] : o.rowSize[i - 1] + o.vgap + o.bgap);
                 }
-                var t = top[i] <= 1 ? top[i] * 100 + "%" : top[i] + o.vgap + o.tgap + "px", h = "";
+                var t = top[i] <= 1 ? top[i] * 100 + "%" : (top[i] + o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, h = "";
                 if (BI.isNumber(o.rowSize[i])) {
-                    h = o.rowSize[i] <= 1 ? o.rowSize[i] * 100 + "%" : o.rowSize[i] + "px";
+                    h = o.rowSize[i] <= 1 ? o.rowSize[i] * 100 + "%" : o.rowSize[i] / BI.pixRatio + BI.pixUnit;
                 }
                 wi.element.css({top: t, height: h});
                 first(wi, i, j);
@@ -132,9 +132,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
                 if (BI.isNull(bottom[i])) {
                     bottom[i] = bottom[i + 1] + (o.rowSize[i + 1] < 1 ? o.rowSize[i + 1] : o.rowSize[i + 1] + o.vgap + o.tgap);
                 }
-                var b = bottom[i] <= 1 ? bottom[i] * 100 + "%" : bottom[i] + o.vgap + o.bgap + "px", h = "";
+                var b = bottom[i] <= 1 ? bottom[i] * 100 + "%" : (bottom[i] + o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit, h = "";
                 if (BI.isNumber(o.rowSize[i])) {
-                    h = o.rowSize[i] <= 1 ? o.rowSize[i] * 100 + "%" : o.rowSize[i] + "px";
+                    h = o.rowSize[i] <= 1 ? o.rowSize[i] * 100 + "%" : o.rowSize[i] / BI.pixRatio + BI.pixUnit;
                 }
                 wi.element.css({bottom: b, height: h});
                 first(wi, i, j);
@@ -150,9 +150,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
                 if (BI.isNull(left[j])) {
                     left[j] = left[j - 1] + (o.columnSize[j - 1] < 1 ? o.columnSize[j - 1] : o.columnSize[j - 1] + o.hgap + o.rgap);
                 }
-                var l = left[j] <= 1 ? left[j] * 100 + "%" : left[j] + o.hgap + o.lgap + "px", w = "";
+                var l = left[j] <= 1 ? left[j] * 100 + "%" : (left[j] + o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, w = "";
                 if (BI.isNumber(o.columnSize[j])) {
-                    w = o.columnSize[j] <= 1 ? o.columnSize[j] * 100 + "%" : o.columnSize[j] + "px";
+                    w = o.columnSize[j] <= 1 ? o.columnSize[j] * 100 + "%" : o.columnSize[j] / BI.pixRatio + BI.pixUnit;
                 }
                 wi.element.css({left: l, width: w});
                 first(wi, i, j);
@@ -168,9 +168,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
                 if (BI.isNull(right[j])) {
                     right[j] = right[j + 1] + (o.columnSize[j + 1] < 1 ? o.columnSize[j + 1] : o.columnSize[j + 1] + o.hgap + o.lgap);
                 }
-                var r = right[j] <= 1 ? right[j] * 100 + "%" : right[j] + o.hgap + o.rgap + "px", w = "";
+                var r = right[j] <= 1 ? right[j] * 100 + "%" : (right[j] + o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit, w = "";
                 if (BI.isNumber(o.columnSize[j])) {
-                    w = o.columnSize[j] <= 1 ? o.columnSize[j] * 100 + "%" : o.columnSize[j] + "px";
+                    w = o.columnSize[j] <= 1 ? o.columnSize[j] * 100 + "%" : o.columnSize[j] / BI.pixRatio + BI.pixUnit;
                 }
                 wi.element.css({right: r, width: w});
                 first(wi, i, j);
diff --git a/src/core/wrapper/layout/middle/middle.center.js b/src/core/wrapper/layout/middle/middle.center.js
index 6309e520d..0ee299c5b 100644
--- a/src/core/wrapper/layout/middle/middle.center.js
+++ b/src/core/wrapper/layout/middle/middle.center.js
@@ -35,10 +35,10 @@ BI.CenterLayout = BI.inherit(BI.Layout, {
                 var w = BI._lazyCreateWidget(item);
                 w.element.css({
                     position: "absolute",
-                    left: o.hgap + o.lgap,
-                    right: o.hgap + o.rgap,
-                    top: o.vgap + o.tgap,
-                    bottom: o.vgap + o.bgap,
+                    left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
+                    right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
+                    top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
+                    bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
                     width: "auto",
                     height: "auto"
                 });
diff --git a/src/core/wrapper/layout/middle/middle.float.center.js b/src/core/wrapper/layout/middle/middle.float.center.js
index 213272543..7d1edf719 100644
--- a/src/core/wrapper/layout/middle/middle.float.center.js
+++ b/src/core/wrapper/layout/middle/middle.float.center.js
@@ -36,10 +36,10 @@ BI.FloatCenterLayout = BI.inherit(BI.Layout, {
                 var w = BI._lazyCreateWidget(item);
                 w.element.css({
                     position: "absolute",
-                    left: o.hgap + o.lgap,
-                    right: o.hgap + o.rgap,
-                    top: o.vgap + o.tgap,
-                    bottom: o.vgap + o.bgap,
+                    left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
+                    right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
+                    top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
+                    bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
                     width: "auto",
                     height: "auto"
                 });
diff --git a/src/core/wrapper/layout/middle/middle.horizontal.js b/src/core/wrapper/layout/middle/middle.horizontal.js
index e4389624e..569027a67 100644
--- a/src/core/wrapper/layout/middle/middle.horizontal.js
+++ b/src/core/wrapper/layout/middle/middle.horizontal.js
@@ -34,10 +34,10 @@ BI.HorizontalCenterLayout = BI.inherit(BI.Layout, {
                 var w = BI._lazyCreateWidget(item);
                 w.element.css({
                     position: "absolute",
-                    left: o.hgap + o.lgap,
-                    right: o.hgap + o.rgap,
-                    top: o.vgap + o.tgap,
-                    bottom: o.vgap + o.bgap,
+                    left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
+                    right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
+                    top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
+                    bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
                     width: "auto"
                 });
                 list[i].el.addItem(w);
diff --git a/src/core/wrapper/layout/middle/middle.vertical.js b/src/core/wrapper/layout/middle/middle.vertical.js
index 0b61f2054..0065dd62e 100644
--- a/src/core/wrapper/layout/middle/middle.vertical.js
+++ b/src/core/wrapper/layout/middle/middle.vertical.js
@@ -35,10 +35,10 @@ BI.VerticalCenterLayout = BI.inherit(BI.Layout, {
                 var w = BI._lazyCreateWidget(item);
                 w.element.css({
                     position: "absolute",
-                    left: o.hgap + o.lgap,
-                    right: o.hgap + o.rgap,
-                    top: o.vgap + o.tgap,
-                    bottom: o.vgap + o.bgap,
+                    left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
+                    right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
+                    top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
+                    bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
                     height: "auto"
                 });
                 list[i].el.addItem(w);
diff --git a/src/widget/multiselect/multiselect.loader.nobar.js b/src/widget/multiselect/multiselect.loader.nobar.js
index 46bcdbe4b..45b3b6d92 100644
--- a/src/widget/multiselect/multiselect.loader.nobar.js
+++ b/src/widget/multiselect/multiselect.loader.nobar.js
@@ -166,7 +166,7 @@ BI.MultiSelectNoBarLoader = BI.inherit(BI.Widget, {
     },
 
     resetHeight: function (h) {
-        this.button_group.element.css({"max-height": h + "px"});
+        this.button_group.element.css({"max-height": h / BI.pixRatio + BI.pixUnit});
     },
 
     resetWidth: function () {
@@ -175,4 +175,4 @@ BI.MultiSelectNoBarLoader = BI.inherit(BI.Widget, {
 });
 
 BI.MultiSelectNoBarLoader.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.multi_select_no_bar_loader", BI.MultiSelectNoBarLoader);
\ No newline at end of file
+BI.shortcut("bi.multi_select_no_bar_loader", BI.MultiSelectNoBarLoader);
diff --git a/src/widget/singleselect/singleselect.list.js b/src/widget/singleselect/singleselect.list.js
index 98340ede0..8d4b00b9e 100644
--- a/src/widget/singleselect/singleselect.list.js
+++ b/src/widget/singleselect/singleselect.list.js
@@ -116,7 +116,7 @@ BI.SingleSelectList = BI.inherit(BI.Widget, {
 
     resetHeight: function (h) {
         this.list.resetHeight ? this.list.resetHeight(h) :
-            this.list.element.css({"max-height": h + "px"});
+            this.list.element.css({"max-height": h / BI.pixRatio + BI.pixUnit});
     },
 
     setNotSelectedValue: function () {
@@ -156,4 +156,4 @@ BI.SingleSelectList = BI.inherit(BI.Widget, {
     }
 });
 BI.SingleSelectList.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.single_select_list", BI.SingleSelectList);
\ No newline at end of file
+BI.shortcut("bi.single_select_list", BI.SingleSelectList);