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. 洛谷 P1162 填涂颜色【DFS】

    题目链接:https://www.luogu.org/problemnew/show/P1162 题目描述 由数字 0 组成的方阵中,有一任意形状闭合圈,闭合圈由数字 1 构成,围圈时只走上下左右 4 ...

  2. POJ 3273-Monthly Expense 求分组和的最小的最大值【二分答案】

    题目链接:http://poj.org/problem?id=3273 题目大意:给出一个有n个数据的数组,将其分为连续的m份,找到一种分法,是的m份中最大一份总和最小 解题思路: 直接在答案的区间内 ...

  3. Python常用模块--base64

    作用:对一些保密性不强的信息进行加密,变为人类不能直接理解的字符串,但是可以反向解密,是一种‘防君子,不防小人’的措施. 例如:在一些项目中,接口的报文是通过base64加密传输的,所以在进行接口自动 ...

  4. Jmeter脚本录制方法（二）手工编写脚本（jmeter与fiddler结合使用）

    jmeter脚本录制方法可以分三种,前几天写的一篇文章中,已介绍了前两种,今天来说下第三种,手工编写脚本,建议使用这一种方法,虽然写的过程有点繁琐,但调试脚本比前两者方式都要便捷. 首先来看下三种方式 ...

  5. js异步刷新局部页面

    真不想说博客园的Markdown编辑器,我发表到我的个人博客上多好看的一篇文章,发到博客园上格式就成这个鸟样了,哎,不发现到博客首页了,就个人存个档吧 最近在做一个异步刷新页面中的局部,这样做可以防出 ...

  6. Spark函数式编程进阶

    函数式编程进阶 1.函数和变量一样作为Scala语言的一等公民,函数可以直接复制给变量: 2.函数更长用的方式是匿名函数,定义的时候只需要说明输入参数的类型和函数体即可,不需要名称,但是匿名函数赋值给 ...

  7. 启动Azure模拟器出错解决方案

    错误弹窗: 输出控制台: Microsoft Azure Tools: Warning: Overriding public port 80 to 2888 in role 'WebRole1'. M ...

  8. 深入学习webpack

    webpack配置是标准的Node.js CommonJS模块,webpack中的绝对路径指"/src/css/file",相对路径指"../css/file" ...

  9. python面向对象编程练习

    练习题 1.面向对象三大特性,各有什么用处,说说你的理解. 面向对象的三大特性: 1.继承:解决代码的复用性问题 2.封装:对数据属性严格控制,隔离复杂度 3.多态性:增加程序的灵活性与可扩展性 2. ...

  10. nodejs区分开发环境和生产环境

    参考: https://www.cnblogs.com/suoking/p/5509060.html linux&mac 设置dev,producntion export NODE_ENV=p ...