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

标签：

序言：应朋友要求随手写了一下移动端 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; } } }}

View Code

CSS代码：

HTML代码:

自适应标题

自适应结束

完整demo代码：

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

自适应标题

自适应介绍

View Code

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

例图：

PS:转载请注明出处，博客园(杨君华)

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

标签：

标签：

序言：应朋友要求随手写了一下移动端 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; } } }}

View Code

CSS代码：

HTML代码:

自适应标题

自适应结束

完整demo代码：

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

自适应标题

自适应介绍

View Code

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

例图：

PS:转载请注明出处，博客园(杨君华)

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

标签：