23、WinJS控件样式与样式规则定位指南

WinJS控件样式与样式规则定位指南

1. WinJS控件样式介绍

1.1 ViewBox控件

ViewBox 控件能够自适应其父容器的大小，并且在不改变子元素宽高比的前提下，对单个子元素进行缩放以适应 ViewBox 的大小。当用户旋转平板电脑时，ViewBox 会相应地处理其内容的缩放。

以下是一个包含 ViewBox 的示例代码：

<!-- HTML snippet -->
<div class="parent">
    <div data-win-control="WinJS.UI.ViewBox">
        <div class="child"></div>
    </div>
</div>

/* CSS snippet */
.lst0926 .parent {
    width: 100px;
    height: 300px;
    border: solid 2px gray;
}

.lst0926 .child {
    width: 300px;
    height: 100px;
    border: solid 2px;
}

ViewBox 缩放子元素后的代码如下：

<div class="parent">
    <div class="win-viewbox" data-win-control="WinJS.UI.ViewBox