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. BZOJ1266 [AHOI2006]上学路线route Floyd 最小割 SAP

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1266 题意概括 一个无向图,第一问:从1~n的最短路. 第二问,删除价值总和最小的边,使得1~n的 ...

  2. vi中批量加注释

    用v进入virtual模式 按Control+v(win下面ctrl+q)进入列模式 上下键来进行选择 I进行输入(shift+i) 按两次ese键

  3. maven添加插件，与maven打包

    1.编译插件 添加编译器插件来告诉 Maven 使用哪个 JDK 版本是用来编译项目. 2.pom <plugin> <groupId>org.apache.maven.plu ...

  4. 010.Docker Compose构建WordPress实战

    一 前期规划 类型 版本 备注 WordPress镜像 wordpress:latest   MySQL数据库 5.7   Docker已安装,参考<002.Docker版本及安装>. D ...

  5. conda 与 pip 加速

    conda和pip默认使用国外站点来下载软件,我们可以配置国内镜像来加速下载(国外用户无须此操作). 配置清华conda镜像 conda config --add channels https://m ...

  6. Spring框架学习08——自动代理方式实现AOP

    在传统的基于代理类的AOP实现中,每个代理都是通过ProxyFactoryBean织入切面代理,在实际开发中,非常多的Bean每个都配置ProxyFactoryBean开发维护量巨大.解决方案:自动创 ...

  7. 获取img的高

    我们可以通过css设置图片的width,然后通过 clientWidth获取图片的宽,但是这个宽似乎是css里面定义的width值,但是对于图片的高,使用 clientHeight 来获取似乎是有些问 ...

  8. 12，EasyNetQ-自动订阅

    EasyNetQ自v0.7.1.30附带一个简单的AutoSubscriber. 您可以使用它轻松扫描实现接口IConsume <T>或IConsumeAsync <T>的类的 ...

  9. BZOJ.3425.[POI2013]Polarization(DP 多重背包 二进制优化)

    BZOJ 洛谷 最小可到达点对数自然是把一条路径上的边不断反向,也就是黑白染色后都由黑点指向白点.这样答案就是\(n-1\). 最大可到达点对数,容易想到找一个点\(a\),然后将其子树分为两部分\( ...

  10. 洛谷.3224.[HNOI2012]永无乡(Splay启发式合并)

    题目链接 查找排名为k的数用平衡树 合并时用启发式合并,把size小的树上的所有节点插入到size大的树中,每个节点最多需要O(logn)时间 并查集维护连通关系即可 O(nlogn*insert t ...