序言：应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ，以备后用

LESS代码：

.adaptive-circle {

    margin: 50px auto 0;

    width: 80%;

    height:;

    padding-top: 80%;

    border-radius: 100%;

    border: 1px solid #000;

    box-sizing: border-box; // for .layout { height: 100%; }

    position: relative;

    .layout {

        position: absolute;

        left:;

        top:;

        width: 100%;

        height: 100%;

        overflow: hidden;

        text-align: center;

        &.middle {

            &:before {

                display: inline-block;

                vertical-align: middle;

                content: '';

                height: 100%;

                width:;

                overflow: hidden;

            }

            div:first-child {

                display: inline-block;

                vertical-align: middle;

            }

        }

    }

}

CSS代码：

<style>

    .adaptive-circle {

        margin: 50px auto 0;

        width: 80%;

        height:;

        padding-top: 80%;

        border-radius: 100%;

        border: 1px solid #000;

        box-sizing: border-box;

        position: relative;

    }

    .adaptive-circle .layout {

        position: absolute;

        left:;

        top:;

        width: 100%;

        height: 100%;

        overflow: hidden;

        text-align: center;

    }

    .adaptive-circle .layout.middle:before {

        display: inline-block;

        vertical-align: middle;

        content: '';

        height: 100%;

        width:;

        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:转载请注明出处，博客园(杨君华)

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )的更多相关文章

  1. Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法

    Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...

  2. 鼠标hover某个元素时其属性表现Css transition 过渡效果（以宽高属性居中放大为例）

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  3. NGUI 屏幕自适应(初始设定宽高800x480只支持比其大的屏幕）

    自适应讲解部分可以参考以下网址:http://www.xuanyusong.com/archives/2536,下面代码中提到的AdaptiveManualHeight()函数就是参考该文章的. 下面 ...

  4. 移动端H5页面自适应手机屏幕宽度

    1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem ...

  5. 移动页面HTML5自适应手机屏幕宽度

    标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...

  6. android webview使用心得 屏幕宽度自适应

    webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮 让Webview加载的页面居中显示有我知道的 ...

  7. Android程序对不同手机屏幕分辨率自适应的方法

    相信各位Android开发爱好者都知道,由于OEM之间的竞争,各种Android操作系统的手机简直就是琳琅满目,屏幕分辨率的差异可想而知.目前比较主流的有WVGA=800x480,HVGA=480x3 ...

  8. css样式： 宽高按一定比例进行自适应

    纯 CSS 实现高度与宽度成比例的效果 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 ...

  9. CSS实现宽度自适应100%，宽高16:9的比例的矩形

    现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 代码 HTML &l ...

随机推荐

  1. BZOJ1070 [SCOI2007]修车

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  2. Visual Studio多版本进行切换的研究

    最近在升级公司内部的项目到最新的开发工具Visual Studio 2015,可能在团队开发上会遇到这些问题: 1.团队成员的电脑和系统,设置安装的开发工具参差不齐 2.有些成员的Visual Stu ...

  3. Adding New Functions to MySQL(User-Defined Function Interface UDF、Native Function)

    catalog . How to Add New Functions to MySQL . Features of the User-Defined Function Interface . User ...

  4. 通过Calendar类判断是否是周末及是否在指定时间

    package time; import java.sql.Timestamp; import java.util.Calendar; import java.util.Date; public cl ...

  5. MOOCULUS微积分-2: 数列与级数学习笔记 2. Series

    此课程(MOOCULUS-2 "Sequences and Series")由Ohio State University于2014年在Coursera平台讲授. PDF格式教材下载 ...

  6. 屠蛟之路_重登数据库大山_SecondDay

    重登数据库大山 屠蛟少年们痛定思痛,(2.0正式改名,咳咳),整顿之后,开启新的屠蛟之路. 然而现实摆在他们面前的是,如果想要往东追击beta怪蛟,就要重新攀登上绵亘数千里.有万丈高的数据库大山脉.不 ...

  7. Deep Learning in NLP （一）词向量和语言模型

    原文转载:http://licstar.net/archives/328 Deep Learning 算法已经在图像和音频领域取得了惊人的成果,但是在 NLP 领域中尚未见到如此激动人心的结果.关于这 ...

  8. IOS基础之 (设计模式)

    一 工厂方法 工厂方法方便我们快速创建类的实例的方法.通过工厂方法,可以让调用过程更加清晰. Person.h #import <Foundation/Foundation.h> @int ...

  9. Altium Designer 15 --- Design PCB Frame by Rhinoceros

    step 1: Draw a PCB shape and the main component placed in the PCB. The drawing sheet should be in th ...

  10. 64位centos下安装python的PIL模块

    http://blog.csdn.net/xiaojun1288/article/details/8673529