序言：应朋友要求随手写了一下移动端 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. C# winform窗体设计-数据库连接

    本篇文章内容主要是小编上课所学的总结 最近小编在学习C#中的数据库管理方面,主要学习到数据库的增删改查,查询学生平均分,最低分,最高分等操作 [本篇文章中小编主要讲解数据库的连接] 在C#中使用数据库 ...

  2. Vmware vsphere 网络架构

    VMware vSphere架构下服务器会虚拟出交换机来供ESX Host虚拟机来使用,虚拟交换机有两种,vSwitch虚拟交换机和vNetwork分布式虚拟交换机,每个ESX Host均有一个标准v ...

  3. [IOS Tableview] cell自定义view显示错误问题

    问题介绍:按照tableviewcell的tag自定义cell的view显示的时候,会出现拖动时显示错误情况(在Tableview的范围超出屏幕范围需要滑动的情况下). 我做的是一个下载界面,我为了简 ...

  4. 常用sql语句整理[SQL Server]

    1. 存储过程 CREATE PROCEDURE [dbo].[bbs_move_createtopic] @fid smallint, @iconid smallint, @curtid INT O ...

  5. 对iOS中Delegate的理解

    首先 协议protocol 和委托delegate 是两个完全不同的概念  放在一起说 是因为我们总是在同一个头文件里看到它们: 首先解释一下什么是委托 :举个例子 ,我工作的时候给你打电话,让你帮我 ...

  6. 解决Cookie乱码问题

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

  7. Ajax 简述

    说到Ajax大家一定不陌生,但是真要具体说说它是什么?估计给出完整定义的人应该不多. W3C上给Ajax的具体定义为: AJAX = Asynchronous JavaScript and XML(异 ...

  8. CSS3-border-radius的兼容写法大全

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  9. json转换成对象

    在json转换成对象时,json的key会与java 类的字段一一对应.如果没有映射上的java字段会在该数据类型上填充默认值,如int 0,String null 等. 没有映射的json key在 ...

  10. Eclipse自动补全+常用快捷键

    一,Eclipse自动补全增强方法 在Eclipse中,从Window -> preferences -> Java -> Editor -> Content assist - ...