Home > Article > Web Front-end > 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )_html/css_WEB-ITnose
序言:应朋友要求随手写了一下移动端 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代码:
移动端 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>自适应标题
自适应介绍
示例链接:http://jsbin.com/wazovezima/edit?html,output
例图: