我之前写九宫格自适应布局的时候，每个格子是使用媒体查询器（@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. jsp中的input

    Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=text 输入类型是text,这是我们见的 ...

  2. 【转】Python 数据库连接池

    python编程中可以使用pymysql进行数据库连接及增删改查操作,但每次连接mysql请求时,都是独立的去请求访问,比较浪费资源,而且访问数量达到一定数量时,对mysql的性能会产生较大的影响.因 ...

  3. 2.PostgreSQL安装详细步骤（windows）【转】

    感谢 Junn9527 PostgreSQL安装:一.windows下安装过程安装介质:postgresql-9.1.3-1-windows.exe(46M),安装过程非常简单,过程如下:1.开始安装 ...

  4. MVC中输入的保护验证用：HttpServerUtility.HtmlEncode

    安全说明: 上面的代码使用HttpServerUtility.HtmlEncode来保护应用程序的恶意输入 (即 JavaScript).详细信息请参阅如何: 在 Web 应用程序,通过应用 HTML ...

  5. 2016年JD工作遇到的问题：1-5，搭建环境和熟悉项目过程中的坑

    1.更新不需要权限的项目A,却提示没有权限. 先从Git上更新项目A的代码,提示没有权限. 然后从Git上更新其它项目B的代码,正常. 再更新项目A的代码,正常了. 奇葩问题! 2.Eclipse中, ...

  6. MySQL源码中的String

    适用于离开作用域就销毁的字符串.

  7. jsp 中获取自定义变量

    首先确定El表达式的查找范围: 依次从Page.Request.Session.Application 中的 attribute属性中查找. <% String basePath = reque ...

  8. 阿牛的EOF牛肉串(递推)

    阿牛的EOF牛肉串 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Sub ...

  9. npm命令 VS yarn命令

    npm yarn 说明 npm init yarn init  在项目中引导创建一个package.json文件 npm install yarn install/yarn  安装所有依赖包(依据pa ...

  10. Gradle下载依赖jar包位置修改

    gradle会下载相关需要依赖的jar包,默认的本地存放地址是:C:/Users/(用户名)/.gradle/caches/modules-2/files-2.1,很多人和我一样不愿意放在C盘,所以需 ...