你的位置:首页 > 网页设计

[网页设计]移动端 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代码:

<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>

View Code

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

例图:

 

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