序言：应朋友要求随手写了一下移动端 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代码：
<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>
HTML代码:
<div class="adaptive-circle"> <div class="layout middle"> <div> <h2>自适应标题</h2> <p>自适应结束</p> </div> </div> </div>
完整demo代码：
<!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: 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> <body> <div class="adaptive-circle"> <div class="layout middle"> <div> <h2>自适应标题</h2> <p>自适应介绍</p> </div> </div> </div> </body> </html>
示例链接：http://jsbin.com/wazovezima/edit?html,output
例图：
PS:转载请注明出处，博客园(杨君华)