CSS 实现宽度固定，高度自适应的屏幕显示(适配不同分辨率）

左手的ㄟ右手 2022-12-06 01:13 627阅读 0赞

# HTML 代码  #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>高度自适应分辨率</title>
        <link rel="stylesheet" href="./css/index.css">
    </head>
    <body>
    <div class="main">
        
        <div class="logo">
            <div class="left">
                <img src="./images/logo.jpg" alt="">
            </div>
            <div class="right">
                <div class="top">CSS 适配分辨率</div>
                <div class="bottom">CSS adaptation resolution</div>
            </div>
        </div>
        
        <div class="content">
            <div class="cn">宽度固定</div>
            <div class="en">Fixed width</div>
            <div class="cn">高度自适应</div>
            <div class="en">Highly adaptive</div>
        </div>
    </div>
    </body>
    </html>

# CSS 代码 #

*{
    	margin: 0;
    	padding: 0;
    }
    html,body {
    	height: 100%;
    	overflow: hidden;
    	font-family: 黑体;
    }
    .main {
    	height: 100%;
    }
    .logo, .content {
    	width: 100%;
    	text-align: center;
    }
    .logo {
    	height: 15.625vw;
    	background: #fff;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    .logo .left {
    	margin-right: 5vw;
    }
    .logo .left img{
    	width: 13.54vw;
    	height: 13.54vw;
    }
    .logo .right {
    	color: #ff0000;
    	font-size: 3.64vw;
    }
    .logo .right .top {
    	font-size: 6.4vw;
    }
    .content {
    	/*1vw = 19.2px*/
    	position: absolute;
    	top: 15.625vw;
    	bottom: 0;
    	left: 0;
    	background-color: cornflowerblue;
    	color: #ddd;
    	display: flex;
    	flex-flow: column;
    	align-items: center;
    	justify-content: center;
    	font-size: 6.25vw;
    	line-height: 8.25vw;
    }

# 效果图： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Zlbmd5Q29kZXI_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Zlbmd5Q29kZXI_size_16_color_FFFFFF_t_70]: /images/20221123/9f7a247f802f468e9705669831cc3adf.png