我之前写九宫格自适应布局的时候，每个格子是使用媒体查询器（@media）或者js动态设置css，根据不同的手机屏幕宽度，适配不同手机，但是这样有个很大的缺点，那就是移动端的屏幕尺寸太多了，就得写很多代码，才能实现我们想要的效果。

今天突发奇想，使用了纯css实现了我想要的效果，下面就和大家来分享，上代码;

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>九宫格</title>

        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />

        <style type="text/css">

            a, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, img, input, label, legend, li, mark, ol, p, section, span, strong, textarea, time, ul, var input{

                margin: 0;

                border: 0;

                padding: 0;

                font-style: normal;

                color: #323232;

                box-sizing: border-box;

                -moz-box-sizing:border-box; /* Firefox */

                -webkit-box-sizing:border-box; /* Safari */

            }

            html,body{

                background: #fff;

            }

            ul{

                text-decoration: none;

                list-style-type: none;

            }

            .video_list>li{

                float: left;

                width: 32%;

                text-align: center;

                border: 1px solid #ccc;

                padding-top: 31%;

                margin-left: 1%;

                margin-top: 1%;

                position: relative;

            }

            .video_list>li>div{

                position: absolute;

                left: 0;

                top: 0;

                width: 100%;

                height: 100%;

                background-color: #09BE07;

            }

            .video_list>li>div>span{

                display: inline-block;

                margin-top: 50%;

                -webkit-transform: translateY(-50%);

                transform: translateY(-50%);

            }

        </style>

    </head>

    <body>

        <ul class="video_list">

            <li><div><span>1</span></div></li>

            <li><div><span>2</span></div></li>

            <li><div><span>3</span></div></li>

            <li><div><span>4</span></div></li>

            <li><div><span>5</span></div></li>

            <li><div><span>6</span></div></li>

            <li><div><span>7</span></div></li>

            <li><div><span>8</span></div></li>

            <li><div><span>9</span></div></li>

        </ul>

    </body>

</html>

　　里面包括了css的简单初始化，去除后，真正实现的代码没有几行。

如果我们放的是图片，那么就把span标签换成img标签，并且css给img加上width:100%;height:100%;就可以了

css实现九宫格图片自适应布局的更多相关文章

  1. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  2. CSS 负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head>     <meta charset="UTF-8"& ...

  3. CSS负边距自适应布局三例

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title& ...

  4. css负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...

  5. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  6. 关于使用rem单位、css函数calc()进行自适应布局

    一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...

  7. CSS——background-size实现图片自适应

    在网页端,我们经常想让图片能够自适应拉伸缩放,使之可以完美的嵌入我们给定的容器里,比如div,button,input,下面我将用代码来说明如何实现这个功能! 一.div背景图自适应 如果知道图片都有 ...

  8. css设置背景图片自适应

      CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...

  9. css实现三栏自适应布局（两边固定，中间自适应）以及优缺点

    方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...

随机推荐

  1. PHP.38-TP框架商城应用实例-后台14-商品管理-商品扩展分类的删除、修改

    商品分类删除 1.删除商品时,根据商品id删除扩展分类表数据 商品扩展分类修改 1.在控制器GoodsController.class.php/edit()中根据商品id取出对应的所有扩展分类 2.在 ...

  2. IAR工程名修改

    修改.dep..ewd..ewp..eww四个文件的文件名 删除.ewt文件(如果存在) 记事本打开.eww文件,修改<path></path>间的.ewp文件名 打开工程,打 ...

  3. XML与Object的范型转换

    前段时间做object转换xml想了很多,所有打算整理下 做成以下的通用方法. public static bool ObjectToXml<T>(string filePath, T t ...

  4. Linux上jdk的安装（CentOS6.5）

    centos openjdk 安装 http://www.cnblogs.com/ilahsa/archive/2012/12/11/2813059.html 知CentOS6.5桌面版默认安装的是J ...

  5. Linux系统学习笔记（1）

    学习地址:http://www.runoob.com/linux/linux-tutorial.html 1.学习Windows和Linux哪个比较难? 前期是Windows容易学习,后期是Linux ...

  6. CTS测试笔记

    电脑安装12.4乌班图系统 更新源 (1) 打开ubuntu software center (2) 电脑左上角选择edit→software sources…→点击download from,选择o ...

  7. Percona-Tookit工具包之pt-find

      Preface       We used to use "find" command in linux or AIX when we need to get a certai ...

  8. Mac下安装pear库+phpDocumentor

    1. 首先安装pear: curl -o go-pear.php https://pear.php.net/go-pear.phar 看见这个就安装OK: % Total % Received % X ...

  9. KVM WEB管理工具——WebVirtMgr（二）日常配置

    配置宿主机 1.登录WebVirtMgr管理平台 2.添加宿主机 选择首页的WebVirtMgr -->Addd Connection 选择“SSH链接“,设置Label,IP,用户 注意:La ...

  10. Pro Git - 笔记1

    Getting Started About Version Control Local Version Control Systems Centralized Version Control Syst ...