序言：应朋友要求随手写了一下移动端 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. Slave2: no datanode to stop（HADOOP_PID_DIR）

    HADOOP_PID_DIR 本想在环境变量里设置,在相关文件里直接尹用,但是我想起来那时候的JAVA_HOME都不行,还是一个一个设置吧. 有时候,我们对运行几天或者几个月的hadoop或者hbas ...

  2. Jenkins/CCNET发送邮件策略和注意事项，以及邮箱类型的选择

    QQ邮箱永远也不要用,原因:安全机制太强导致在CCNET/Jenkins中极难配置,且反垃圾太强,有些项目会涉及到敏感词一样屏蔽,如果发邮件找客服求助时,基本是无果. 如果在免费领域,推荐使用免费企业 ...

  3. namespace std

    c++中使用namespace来防止命名冲突(重命名),我们经常使用的一些函数和变量都被放在一个叫std的namespace中,如标准I/O流操作,vector等等.我们在每一个文件中都可使用std中 ...

  4. squid安装配置

    Squid做反向代理(192.168.1.69) squid.conf http_port 80 vhost vport visible_hostname pdd2.matrixcdn.net cac ...

  5. Codeforces Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) A. Checking the Calendar（水题）

    传送门 Description You are given names of two days of the week. Please, determine whether it is possibl ...

  6. django redis操作

    from utils.redis.connect import redis_cache as rr.flushdb() 列表操作 r.lpush("name", xxxx) or ...

  7. 解决Cookie乱码问题

    写了一个cookie的定义和获取,结果我输入中文后,页面报错 报错信息如下: type Exception report message An exception occurred processin ...

  8. Jacobian矩阵和Hessian矩阵

    1.Jacobian矩阵 在矩阵论中,Jacobian矩阵是一阶偏导矩阵,其行列式称为Jacobian行列式.假设 函数 $f:R^n \to R^m$, 输入是向量 $x \in R^n$ ,输出为 ...

  9. java中的异常理解

    java异常是java提供的用于处理程序中错误的一种机制.所谓错误是指在程序运行的过程中发生的一些异常事件(如:除0溢出,数组下标越界,所要读取的文件不存在).设计良好地程序应该在程序异常发生时提供处 ...

  10. 【原】textarea 换行之间的转换

    在操纵表单的时候,如果你在textarea输入的内容是换行的,如果没有进行相应的装换,你输出的内容是不会跟着一起换行的.如果后台返回给你的数据是带有<br />换行符的, 那么在texta ...