序言：应朋友要求随手写了一下移动端 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. Matlab以特殊分隔符写入txt（dlmwrite）

    clc clear all load('E:\RSWeb\mahoyt数据集\movielens\u.data'); dlmwrite('E:\RSWeb\mahoyt数据集\movielens\ne ...

  2. java web项目导入到eclipse中变成了java项目的一种情况的解决办法

    前提,我把代码上传到github上之后,在另外一台电脑上拉下之后,先报出现的是jre不对,然后换成了当前的jre,然后红色的感叹号消失了但是之前项目上那个小地球不见了,也就是说变成了java项目. - ...

  3. MAC上快速调出终端的设置（保持和Windows的操作一致）

    在Windows上可以这样操作[Win+R]键->输入[cmd/cmder]打开终端. 在MAC下需要做些设置:打开[系统偏好设置]->打开[键盘]->打开[快捷键]->找到[ ...

  4. VS提示“项目文件" "已被重命名或已不在解决方案中”的解决办法 .

    多个项目的源码在一个源代码中,其中,有一个源代码废弃不可用了.删除后,再次生成解决方案时出现了问题“项目文件" "已被重命名或已不在解决方案中”. 解决方法是: 1.找到主项目,右 ...

  5. Microsoft SQL Server，错误: 229 解决方案

    今天我在数据库新建一个用户时,碰到了一个奇怪的问题,账号建好了,也指定了该账号上对应的数据库.但是,奇怪的问题出现了,死活不让我新建表,提示如下: 最后,给我找到问题所在了,就是在指定表权限的时候权限 ...

  6. shell命令date

    某个标准时间转换为unix时间戳 date -d '2015-10-20 15:07:02' +%s unix时间戳转换为对应的标准时间 date -d @1445324822 date " ...

  7. NYOJ 16 矩形嵌套（经典动态规划）

    传送门 Description 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a<c,b<d或者b<c,a<d(相当于 ...

  8. JS-百钱买百鸡案例-for循环制作

    <html> <head> <meta charset="utf-8"/> <title></title> <sc ...

  9. BZOJ4415: [Shoi2013]发牌

    显然可以线段树或树状数组上二分. 然而直接写splay在bzoj上并不会T. 然而发这题的目的只是因为我又忘了return了啊啊啊啊(TдT) 内心十分崩溃.关键是在本地还能过. #include&l ...

  10. log4net 记录到数据库和本地文件

    1)配置代码 <?xml version="1.0" encoding="utf-8" ?> <configuration> <c ...