iphone & pc & iphone-landscape demo 模型 in css

About

在写文档demo的时候，如果是写关于mobile相关的东西，为了更好地展现demo， 可能需要把demo放在一个iphone模型上。 像 http://goratchet.com/components/ 一样。

所以偷了一个简化版本的iphone demo设计然后用css实现了。宽度是自适应的， 用了我的flex网格， 以后写文档就用它了。

像这样的

还有landscape的：

还有pc的

源码

html结构源码

<link rel="stylesheet" href="http://g.tbcdn.cn/mui/mui-flex/1.0.1/flex.css">
<link rel="stylesheet" href="../build/demo.css">
<script src="demo.js"></script>


<div class="mui-demo pc mui-flex vertical" style="width: 500px;">
    <div class="cell fixed header mui-flex align-center">
        <div class="cell dots fixed"></div>
        <div class="cell dots fixed"></div>
        <div class="cell dots fixed"></div>
        <div class="cell search-box fixed"></div>
    </div>
    <div class="cell content">
        <div class="inner">
            <iframe src="http://zhihu.com" frameborder="0"></iframe>
        </div>
    </div>
</div>


<br><br>


<div class="mui-demo iphone mui-flex vertical ">
    <div class="header cell fixed "></div>
    <div class="content cell">
        <div class="inner">
            <iframe src="http://goratchet.com/examples/app-ios-mail/" frameborder="0"></iframe>
        </div>
    </div>
    <div class="footer cell fixed"></div>
</div>


<br><br>



<div class="mui-demo iphone-landscape mui-flex align-stretch" width="">
    <div class="cell fixed  header"></div>
    <div class="cell content">
        <div class="inner">
            <iframe src="http://goratchet.com/examples/app-movies/" frameborder="0"></iframe>
        </div>
    </div>
    <div class="cell fixed footer "> </div>
</div>

less 样式源码

@border-color: #aaa;
@bg-color: #E2E2E2;
.mui-demo {
    // for pc
    min-height: 300px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
    border-radius: 4px;
    border: 1px solid @border-color;

    .content {
        overflow: hidden;
        background: white;
        iframe {
            height: 100%;
            width: 100%;
        }
    } 

    // border-bottom: none;
    &.pc {
        min-width: 320px;
        height: 300px;
        .header {
            height: 32px;
            width: 100%;
            background: @bg-color;
            .cell {
                width: 14px;
                height: 14px;
                background: #fff;
                border-radius: 50%;
                border: 1px solid @border-color;
                margin-left: 6px;
            }
            .search-box {
                height: 18px;
                width: 60%;
                background: #fff;
                border-radius: 4px;
                border: 1px solid @border-color;
            }
        }
    }

    // iphone
    &.iphone {
        border-radius: 32px;
        box-shadow: 0 1px 5px rgba(0,0,0,0.15);
        z-index: 0;
        padding: 0 10px 0; 
        border-width: 1px;
        width: 275px;
        height: 520px;
        background: @bg-color;
        .header {
            height: 60px;
            position: relative;
            &:before{
                position: absolute;
                content: '';
                width: 80px;
                height: 10px;
                background: transparent;
                border-radius: 50px;
                border: 1px solid #AAA;
                left: 50%;
                top: 50%;
                margin-left: -40px;
                margin-top: -5px;
            }
        }
        .footer {
            height: 60px;
            position: relative;
            &:before{
                position: absolute;
                content: '';
                width: 40px;
                height: 40px;
                background: transparent;
                border-radius: 50%;
                border: 1px solid #aaa;
                left: 50%;
                top: 50%;
                margin-left: -20px;
                margin-top: -20px;
            }
        }
    }

    &.iphone-landscape{
        padding: 10px 0; 
        width: 547px;
        border-radius: 32px;
        box-shadow: 0 1px 5px rgba(0,0,0,0.15);
        border-width: 1px;
        background: @bg-color;
        height: 277px;
        .header{
            width: 60px;
            &:before{
                position: absolute;
                content: '';
                height: 80px !important;
                width: 10px;
                background: transparent;
                border-radius: 50px;
                border: 1px solid #AAA;
                left: 50%;
                top: 50%;
                margin-left: -5px;
                margin-top: -40px;
            }
        } 
        .footer {
            width: 60px;
            &:before {
                position: absolute;
                content: '';
                width: 40px;
                height: 40px;
                background: transparent;
                border-radius: 50%;
                border: 1px solid #aaa;
                left: 50%;
                top: 50%;
                margin-left: -20px;
                margin-top: -20px;
            }
        }
    }
}