css自适应浏览器大小

最新推荐文章于 2022-06-02 09:27:13 发布

weixin_30505485

最新推荐文章于 2022-06-02 09:27:13 发布

阅读量552

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/chenweichu/p/9392514.html

版权

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>

转载于:https://www.cnblogs.com/chenweichu/p/9392514.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30505485

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫