首页 > > 网页制作 > css >

移动端屏幕自适应布局

2018-06-24 02:00:35来源：未知阅读 ()

1、技术点

移动端自适应采用百分比布局比较适合。需要说明一点的是：height的百分比是以父元素的宽度计算的，由于移动端父元素宽度有时没有给定值（如父元素宽度为100%），此时子元素的height就为0。

因此子元素的高度值使用padding-top或者padding-bottom撑起。

同时height的高度设置为0，防止font-size或line-height等属性影响到height。

2、示例

示例为展示图片，每行展示3个图片。每列图片宽度33%，图片间距为0.5%。

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
        <meta name="author" content="Tencent-TGideas" />
        <meta name="Copyright" content="Tencent" />
        <title>实例-图片列表</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            ol,
            ul {
                list-style: none;
            }
            
            html,
            body {
                position: relative;
                width: 100%;
            }
            
            h1 {
                font-size: 14px;
                text-align: center;
                line-height: 70px;
            }
            
            .lists {
                width: 100%;
            }
            
            .lists li {
                position: relative;
                float: left;
                width: 33%;
                /*高度设置为0*/
                height: 0;
                /*padding-bottom设置为33% 以撑起高度*/
                padding: 0 0 33%;
                margin-top: .5%
            }
            
            .lists li:nth-child(3n-1) {
                /*图片间距*/
                margin: .5% .5% 0;
            }
            
            .lists li a,
            .lists li img {
                width: 100%;
                height: 100%;
            }
            
            .lists li a {
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>

    <body>
        <h1>图片列表</h1>
        <ul class="lists">
            <li>
                <a href="javascript:alert('图片');"><img src="img/sqbg-icon.png" alt="图片"></a>
            </li>
            <li>
                <a href="javascript:alert('图片');"><img src="img/sqbg-icon.png" alt="图片"></a>
            </li>
            <li>
                <a href="javascript:alert('图片');"><img src="img/sqbg-icon.png" alt="图片"></a>
            </li>
            <li>
                <a href="javascript:alert('图片');"><img src="img/sqbg-icon.png" alt="图片"></a>
            </li>
            <li>
                <a href="javascript:alert('图片');"><img src="img/sqbg-icon.png" alt="图片"></a>
            </li>
            <li>
                <a href="javascript:alert('图片');"><img src="img/sqbg-icon.png" alt="图片"></a>
            </li>
            <li>
                <a href="javascript:alert('图片');"><img src="img/sqbg-icon.png" alt="图片"></a>
            </li>
            <li>
                <a href="javascript:alert('图片');"><img src="img/sqbg-icon.png" alt="图片"></a>
            </li>
        </ul>
    </body>

</html>