zoukankan      html  css  js  c++  java
  • 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-900px){
        .tli{width:calc(33.33% - 10px); }
    }
    
    @media screen and (min-450px) and (max-900px){
        .tli{width:calc(50% - 10px); }
    }
    @media screen  and (max-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>
  • 相关阅读:
    模块(相当于Java里的包)
    if_else_while_for
    用户交互
    Python入门
    BigInteger类及方法应用
    selenium+java破解极验滑动验证码的示例代码
    Postman 使用详解
    Postman用法简介
    伟大架构师的秘密【转载】
    深入理解HTTP协议(转)
  • 原文地址:https://www.cnblogs.com/chenweichu/p/9392514.html
Copyright © 2011-2022 走看看