序言：应朋友要求随手写了一下移动端 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. Redis未授权访问漏洞分析

    catalog . Redis简介 . 漏洞概述 . 漏洞利用方式 . 修复方式 1. Redis简介 Relevant Link: http://www.cnblogs.com/LittleHann ...

  2. 动态库在线更新导致coredump的问题

    最近我们数据中心主机上的第三方管理工具升级,导致数据中心系统coredump,看起来不相关的事情,到底是怎么回事了? 首先,打开core文件看看: core.45259 is truncated: e ...

  3. androidstudio 常用快捷键

    ctrl+p  查看需要输入的函数列表 ctrl+h  查看继承关系 ctrl +w   选择一个,一行,一段. alter+enter  内容助理 ctrl+q   查看方法注解 相当于 hover ...

  4. VS 错误解决(项目-属性-启用调试器)

    我是先安装了VS2012, 之后由于需要安装了VS2008, 但在VS2012中可以运行程序但是不能调试, 即按Ctrl+F5可以运行, 但是按F5会提示错误. "尝试运行项目时出错:Unc ...

  5. PHP常用函数备用

    刚学习php的时候,我也为记忆php函数苦恼不已.认为干嘛记忆这么枯燥无味的东西呢?用的时候查一下手册不就行了吗?但是当时因为身在辅导机构,还是记忆了一大堆自己并不感兴趣的函数. 由此就想起来,小的时 ...

  6. python不同模式打开文件的完全列表

    模式 描述 r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式打开一个文件用于只读.文件指针将会放在文件的开头.这是默认模式. r+ 打开一个文件用于读写.文件指 ...

  7. 如何用iframe标签以及Javascript制作时钟？

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  8. Python与C++结构体交互

    需求:根据接口规范,实现与服务端的数据交互 服务端结构体分包头.包体.包尾 包头C++结构体示例如下 typedef struct head { BYTE string1; BYTE string2; ...

  9. 【原】js获取height为auto的高度问题

    今天用react写一个页面,需要获取一个img高度设置为auto的高度,可是一直获取到的要么是0,要么是null,因为页面加载完了图片不一定加载完. 当我把高度由 auto 设置为固定值之后,又可以获 ...

  10. C#中int,string,char[],char的转换（待续）

    //char[]转string string mm = "woshicainiao"; char[] ss = mm.ToCharArray(); string AA = new ...