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

    网络技术的优缺点:优点:连接能力,超强路由,管理能力,远距离缺点:低速以及高负载,强烈的软件需求,错误检测能力 SAN:storage area network(存储区域网络)--是一种基于光网的特殊 ...

  2. 如何打war包

    1. 利用jdk里的工具 例如我们要打包的文件在D:\myHome\dist: 运行 cmd: cd D:\myHome\dist 进入D:\myHome\dist 然后输入 D:\myHome\di ...

  3. 2 web服务器：固定返回值

    1.老师给的思路 #tcp socket 服务端 socket = socket.socket() socket.bind() socket.listen() client_socket = sock ...

  4. 通过py2exe打包python程序的过程中，解决的一系列问题

    py2exe的使用方法参考<py2exe使用方法>. 注:程序可以在解释器中正常运行,一切问题都出在打包过程中. 问题1: 现象:RuntimeError: maximum recursi ...

  5. android中的AIDL学习笔记

    一.定义 AIDL是用来解决进程间通信的(一般有四种方式:Activity.Service.ContentProvider.Broadcast Receiver),两个进程间无法直接通信,所以要用AI ...

  6. 【HNOI2008】玩具装箱TOY & 斜率优化学习笔记

    题目 P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为 \(1\cdots N\ ...

  7. json格式化显示样式js代码分享

    最近开发中需要在页面展示json.特整理了下代码,送给大家,希望能帮到有同样需求的朋友们. 代码: <html> <script src="http://cdn.bootc ...

  8. Oracle to MySQL Goldengate实现增量迁移

    第一部分:安装和基本配置 一.环境 两台rhel 6.4虚拟机,分别异构oracle到mysql数据库同步测试Ip:192.168.0.23 部署oracle 11.2.0.4,goldgate 12 ...

  9. Halcon和Opencv区别

    Halcon:机器视觉行业里知名的商业视觉库,非开源的,在国内市场份额处于第一,其提供了1500个多个API算子供开发人员使用,有些编程基础的都可以轻松的入门,其调试也是很方便的,断点单步运行,图像变 ...

  10. 线段树——hdu1754I Hate It

    一.题目回顾 题目链接:I Hate It Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感.不管你喜不喜欢 ...