你的位置:首页 > 软件开发 > 网页设计 > 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

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

发布时间:2016-02-25 12:00:17
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用LESS代码:.adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 8 ...

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

LESS代码:

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
.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实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。