WEB

最新推荐文章于 2025-02-11 08:15:00 发布

Grit_ICPC

最新推荐文章于 2025-02-11 08:15:00 发布

阅读量407

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS/JS 文章标签：根据浏览器宽度调整

本文链接：https://blog.youkuaiyun.com/Grit_ICPC/article/details/51141513

HTML/CSS/JS 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用CSS媒体查询实现不同屏幕宽度下网页布局的变换，包括使用百分比、固定宽度和响应式设计技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>变换宽度</title>
<style  type="text/css">
    #invo{
        text-align:center;
        margin:auto;
        width:750px;
    }
    #invo>div{
        border :1px solid #aaf;
        text-align:left;
        box-sizing:border-box;
        -moz-box-sizing: border-box;
        border-radius:12px 12px 0px 0px;
        background-color: #ffc;
        padding: 5px;
        }
    div#left{
        width: 300px;
        height: 230px;
        float:left;
        }
    div#right{
        width: 750px;
        float: left;
        }
    @media screen and (min-width:1000px){
        #invo{
            text-align:center;
            margin:auto;
            width:960px;
            }
        #invo>div{
            border:1px solid #aaf;
            box-sizing:border-box;
            -moz-box-sizing: border-box;
            border-radius:12px 12px 0px 0px;
            background-color: #ffc;
            paddig:5px;
            }   
        div#left{
        width:240px;
        height:240px;
        float:left;
        }
        div#right{
        width:260px;
        height:240px;
        float:left;
        }
    }
    @media screen and (max-width:480px){
        #invo{
            text-align:center;
            margin:auto;
            width:450px;
            }
        #invo>div{
            border:1px solid #aaf;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            border-radius: 12px 12px 0px 0px;
            background-color:#ffc;
            paddig:5px;
            }   
        div#left{
        width:450px;
        height:140px;
        float:left;
        }
        div#right{
        width:450px;
        height:160px;   
        float:left;
        }
    }   
</style>

</head>

<body>
    <div id="invo">
        <div id="left">
            <h2>1111111111111111111</h2>
            <ul>
                <li>2016-11-10&nbsp;1111111</li>
                <li>2016-12-10&nbsp;1111111</li>
                <li>2016-12-11&nbsp;1111111</li>
             </ul>  
        </div>
        <div id="right">
        <h2>right</h2>
         <ul>
                <li>11111111111111111</li>
                <li>22222222222222222</li>
                <li>33333333333333333</li>
                <li>1111111111111111111</li>
            </ul>  
        </div>
     </div>
</body>
</html>