当前位置:Gxlcms > html代码 > 移动端css实现自适应正圆(宽高随着手机屏幕宽度自适应)_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:61人阅读

序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用

LESS代码:

.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;            }        }    }}

CSS代码:

HTML代码:

自适应标题

自适应结束

完整demo代码:

            移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) 博客园(杨君华)    

自适应标题

自适应介绍

示例链接:http://jsbin.com/wazovezima/edit?html,output

例图:

人气教程排行