我之前写九宫格自适应布局的时候，每个格子是使用媒体查询器（@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. IDEA Java Web(Spring)项目从创建到打包(war)

    创建Maven管理的Java Web应用 创建新项目,"create new project",左侧类型选择"maven",右侧上方选择自己的SDK,点击&qu ...

  2. 3，jieba gensim 最好别分家之最简单的相似度实现

    简单的问答已经实现了,那么问题也跟着出现了,我不能确定问题一定是"你叫什么名字",也有可能是"你是谁","你叫啥"之类的,这就引出了人工智能 ...

  3. 每天一个Linux命令（12）：su命令

    su命令用于切换当前用户身份到其他用户身份,变更时须输入所要变更的用户帐号与密码. 语法: su(选项)(参数) 选项: -c<指令>或--command=<指令>:执行完指定 ...

  4. Python 3基础教程29-os模块

    本文介绍os模块,主要是介绍一些文件的相关操作. 你还有其他方法去查看os 1. help() 然后输入os 2. Python接口文档,前面提到的用浏览器打开的,os文件路径为:C:\Users\A ...

  5. Navicat oracle to postgresql ERR

    可能的解决思路是设好源数据和目标数据库后,先建立表结构,然后修改表结构字段数据类型 参考 https://www.cnblogs.com/stephen-liu74/archive/2012/04/3 ...

  6. sphinx调用API参考（官方手册）

    API的参考实现是用PHP写成的,因为(我们相信)较之其他语言,Sphinx在PHP中应用最广泛.因此这份参考文档基于PHP API的参考,而且这节中的所有的代码样例都用PHP给出. 当然,其他所有A ...

  7. Java进阶知识点1：白捡的扩展性 - 枚举值也是对象

    一.背景 枚举经常被大家用来储存一组有限个数的候选常量.比如下面定义了一组常见数据库类型: public enum DatabaseType { MYSQL, ORACLE, SQLSERVER } ...

  8. 权值树状数组 HDU-2852 KiKi's K-Number

    引入 权值树状数组就是数组下标是数值的数组,数组存储下标对应的值有几个数 题目 HDU-2852 KiKi's K-Number 题意 几种操作,p=0代表push:将数值为a的数压入盒子 p=1代表 ...

  9. 洛谷P1379八数码难题

    题目描述 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0来表示.空格周围的棋子可以移到空格中. 要求解的问题是:给出一种初始布局(初始状态)和目标布局(为 ...

  10. Android之Audio和Video

    The Android platform offers built-in encoding/decoding for a variety of common media types, so that ...