移动端 css实现自适应正圆

发布：2021/4/29 16:45:11作者：管理员来源：本站浏览次数：1285

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) </title>
</head>

<style>
    .adaptive-circle {
        margin: 50px auto 0;
        width: 20%;
        height: 0;
        padding-top: 20%;

        border-radius: 100%;
        border: 1px solid #000;
        box-sizing: border-box;

        position: relative;
    }
    .adaptive-circle .layout {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-align: center;
    }
    .adaptive-circle .layout.middle:before {
        display: inline-block;
        vertical-align: middle;

        content: '';
        height: 100%;
        width: 0;
        overflow: hidden;
    }
    .adaptive-circle .layout.middle div:first-child {
        display: inline-block;
        vertical-align: middle;
    }
</style>

<body>
    <div class="adaptive-circle">
        <div class="layout middle">
            <div>
                <h2>自适应标题</h2>
                <p>自适应介绍</p>
            </div>
        </div>
    </div>
</body>
</html>

　用css实现正方形div

移动端界面设计之尺寸篇　

ffmpeg rtsp转flv挂载到web端（Windos版） SSR服务端渲染-uni-app 教程 uni-app组成和跨端原理-uni-app 教程 WinForm中实现picturebox自适应图片大小的方法 C# 文件操作(复制、移动、重命名、创建、打开、删除) 请在微信客户端打开链接实现办法移动混合App、WebApp和原生APP开发框架盘点 div或元素垂直居中对齐，Css3在html5中实现，流式display:flex布局杨元庆定下联想2018目标：个人电脑重回全球第一移动业务盈利从客户端中检测到有潜在危险的 Request.Form 值

柏港建站平台

柏港 CSS

移动端 css实现自适应正圆

柏港为您推荐了一些相关资讯