css自适应浏览器大小
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自适应浏览器大小的更多相关文章
- jQuery easyui layout布局自适应浏览器大小(转)
首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...
- HTML中使背景图片自适应浏览器大小
由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...
- Echarts自适应浏览器大小
var myChart = echarts.init(document.getElementById('sitesChar')); var option = { title : { text: 'No ...
- CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)
CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...
- (转)CSS 为不同大小的浏览器视窗使用不同的样式表
转自:http://www.iefans.net/liulanqi-shichuang-butong-yangshibiao/ 同一个网站,访问它的浏览器可能会是不同的宽度,常见的有320px,480 ...
- div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...
- echarts图表自适应浏览器窗口的大小
echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...
- 这可能是史上最全的CSS自适应布局总结教程
标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...
- ExtJS6 自适应浏览器窗口大小
ExtJS6官方文档推荐使用Ext.on.做一个小例子,创建一个Panel显示在页面上,使它的大小随浏览器变化,自适应浏览器窗口大小. html:增加一个css样式给Panel加上红色border. ...
随机推荐
- BZOJ1195 [HNOI2006]最短母串 AC自动机 bfs
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 传送门 - BZOJ1195 题意概括 给出一堆串,然后求一个包含这些串的所有串的最短的中的字典序最小的. 题解 先造一个AC ...
- IntelliJ IDEA关于logger的live template配置
1.安装 log support2插件 2.配置log support2 由于项目中的日志框架是公司自己封装的,所以还需要自己手动改一下 log support2插件生成的live template ...
- 牛客提高集训营6 C 树(树链剖分)
题目链接 为了纪(zhuang)念(bi)写完这个树剖单独写一篇.感觉还好,也就6k嘛. 完整比赛题解:https://www.cnblogs.com/SovietPower/p/9826829.ht ...
- Python3基础之异常结构
自定义异常类 class ShortInputException(Exception): def __init__(self, length, atleast): Exception.__init__ ...
- 潭州课堂25班:Ph201805201 爬虫基础 第三课 urllib (课堂笔记)
Python网络请求urllib和urllib3详解 urllib是Python中请求url连接的官方标准库,在Python2中主要为urllib和urllib2,在Python3中整合成了url ...
- 潭州课堂25班:Ph201805201 第十课 类的定义,属性和方法 (课堂笔记)
类的定义 共同属性,特征,方法者,可分为一类,并以名命之 class Abc: # class 定义类, 后面接类名 ( 规则 首字母大写 ) cls_name = '这个类的名字是Abc' # 在类 ...
- [POJ2420]A Star not a Tree?
来源: Waterloo Local 2002.01.26 题目大意: 找出$n$个点的费马点. 思路: 模拟退火. 首先任取其中一个点(或随机一个坐标)作为基准点,每次向四周找距离为$t$的点,如果 ...
- 常见爬虫/BOT 对抗技术简介(二)
上一篇文章分别从网络协议,Robots文件,JS渲染,行为分析等多方面讲了些“反爬虫”,“反-反爬虫”技术. 点击查看:<常见爬虫/BOT 对抗技术简介(一)> 本文将主要介绍各种IP地址 ...
- 什么叫做GNU
GNU就是GNU's Not Unix的缩写, GNU 的创始人Stallman 认为UNIX 虽然不是最 好的操作系统,但是至少不会太差,而他自信有能力把UNIX不足的地方加以改进,使它 成为一个优 ...
- linux下安装python dlib依赖
dlib是主要用于机器学习的库,封装了机器学习算法,可以非常方便的实现比如人脸识别,车辆识别,物体检测以其他很多功能,dlib默认使用C++进行开发,另外图像识别有一部分支持python接口开发,上手 ...