Heim  >  Artikel  >  Web-Frontend  >  移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:25:561643Durchsuche

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

例图:

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn