css自适应浏览器大小

1、屏幕 > 900px :显示3列

2、450px < 屏幕 < 900px :显示2列

3、屏幕 < 450px :显示1列

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>自适应demo</title>

</head>

<style>

.tul{

    width:100%;

    float:left;

    padding-left:10px;

    box-sizing:border-box;

}

.tli{

    border:1px solid #333;

    float:left;

    text-align:center;

    margin-right:8px;

    list-style:none;

}

.tli:last-child{

    margin-right:0;}

@media screen  and (min-width:900px){

    .tli{width:calc(33.33% - 10px); }

}

@media screen and (min-width:450px) and (max-width:900px){

    .tli{width:calc(50% - 10px); }

}

@media screen  and (max-width:450px){

    .tli{width:calc(100% - 2px); }

}

</style>

<body>

<ul class="tul">

<li class="tli">aaaaaaa</li>

<li class="tli">aaaaaaa</li>

<li class="tli">aaaaaaa</li>

</ul>

</body>

</html>

css自适应浏览器大小的更多相关文章

  1. jQuery easyui layout布局自适应浏览器大小(转)

    首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...

  2. HTML中使背景图片自适应浏览器大小

    由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

  3. Echarts自适应浏览器大小

    var myChart = echarts.init(document.getElementById('sitesChar')); var option = { title : { text: 'No ...

  4. CSS实现自适应不同大小屏幕的背景大图的两种方法（转自简书）

    CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...

  5. （转）CSS 为不同大小的浏览器视窗使用不同的样式表

    转自:http://www.iefans.net/liulanqi-shichuang-butong-yangshibiao/ 同一个网站,访问它的浏览器可能会是不同的宽度,常见的有320px,480 ...

  6. div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形

    摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...

  7. echarts图表自适应浏览器窗口的大小

    echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...

  8. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  9. ExtJS6 自适应浏览器窗口大小

    ExtJS6官方文档推荐使用Ext.on.做一个小例子,创建一个Panel显示在页面上,使它的大小随浏览器变化,自适应浏览器窗口大小. html:增加一个css样式给Panel加上红色border. ...

随机推荐

  1. KNN分类算法实现手写数字识别

    需求: 利用一个手写数字“先验数据”集,使用knn算法来实现对手写数字的自动识别: 先验数据(训练数据)集: ♦数据维度比较大,样本数比较多. ♦ 数据集包括数字0-9的手写体. ♦每个数字大约有20 ...

  2. POJ2115 C Looooops 扩展欧几里德

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - POJ2115 题意 对于C的for(i=A ; i!=B ;i +=C)循环语句,问在k位存储系统中循环几次 ...

  3. 073 HBASE的读写以及client API

    一:读写思想 1.系统表 hbase:namespace 存储hbase中所有的namespace的信息 hbase:meta rowkey:hbase中所有表的region的名称 column:re ...

  4. 使用cxf两个声明导致ObjectFactory 类中发生冲突

    在网上搜了答案都是一样的,没有解决这个问题. 后来发现原因在于 -p com.XXX.XXX这个命令. 解决方法: 只需要把命名包的这个命令去掉. 但要注意,在移动到项目中去时,必须Refactor包 ...

  5. [OpenCV-Python] OpenCV 中计算摄影学 部分 IX 对象检测 部分 X

    部分 IX计算摄影学 OpenCV-Python 中文教程(搬运)目录 49 图像去噪目标 • 学习使用非局部平均值去噪算法去除图像中的噪音 • 学习函数 cv2.fastNlMeansDenoisi ...

  6. 计蒜客 淘宝的推荐系统【DP】

    题目链接:https://nanti.jisuanke.com/t/26984                                                             ...

  7. Redis实现的分布式锁和分布式限流

    随着现在分布式越来越普遍,分布式锁也十分常用,我的上一篇文章解释了使用zookeeper实现分布式锁(传送门),本次咱们说一下如何用Redis实现分布式锁和分布限流. Redis有个事务锁,就是如下的 ...

  8. 聊聊RPC原理二

    之前写了一篇关于RPC的文章,浏览量十分感人:),但是感觉文章写得有些粗,觉得很多细节没有讲出来,这次把里边的细节再次补充和说明. 这次主要说的内容分为: 1. RPC的主要结构图. 2.分析结构图的 ...

  9. Java—集合框架详解

    一.描述Java集合框架 集合,在Java语言中,将一系类的对象看成一个整体. 首先查看jdk中的Collection类的源码后会发现Collection是一个接口类,其继承了java迭代接口Iter ...

  10. go标准库-log包源码学习

    log包是go语言提供的一个简单的日志记录功能,其中定义了一个结构体类型 Logger,是整个包的基础部分,包中的其他方法都是围绕这整个结构体创建的． Logger结构 Logger结构的定义如下: ...