移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )_html/css_WEB-ITnose

.adaptive-circle {    margin: 50px auto 0;    width: 80%;    height: 0;    padding-top: 80%;    border-radius: 100%;    border: 1px solid #000;    box-sizing: border-box; // for .layout { height: 100%; }    position: relative;    .layout {        position: absolute;        left: 0;        top: 0;        width: 100%;        height: 100%;        overflow: hidden;        text-align: center;        &.middle {            &:before {                display: inline-block;                vertical-align: middle;                content: '';                height: 100%;                width: 0;                overflow: hidden;            }            div:first-child {                display: inline-block;                vertical-align: middle;            }        }    }}

<style>    .adaptive-circle {        margin: 50px auto 0;        width: 80%;        height: 0;        padding-top: 80%;        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>

<div class="adaptive-circle">    <div class="layout middle">        <div>            <h2>自适应标题</h2>            <p>自适应结束</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>        </div>    </div></div>

            <style>    .adaptive-circle {        margin: 50px auto 0;        width: 80%;        height: 0;        padding-top: 80%;        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>    
        
            
                
自适应标题
                
自适应介绍