序言:应朋友要求随手写了一下移动端 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. VS2010生成安装包

    项目的第一个版本出来了,要做个安装包,之前没有做过,网上看看贴,写了一个,总结下,根据本项目的需要,没有写的太复杂,可能还不是很完善,仅作参考. 首先在打开 VS2010    >   文件 & ...

  2. 数据结构算法C语言实现(八)--- 3.2栈的应用举例:迷宫求解与表达式求值

    一.简介 迷宫求解:类似图的DFS.具体的算法思路可以参考书上的50.51页,不过书上只说了粗略的算法,实现起来还是有很多细节需要注意.大多数只是给了个抽象的名字,甚至参数类型,返回值也没说的很清楚, ...

  3. iOS 解决一个因三方静态库冲突产生的duplicate symbol的问题

    最近在开发项目时编译三方.a时出现了冲突,原因是存在duplicate symbol. <1>模拟器编译时,应用的即时通讯模块采用的三方库(容联云),和视频监控模块采用的三方库(海康威视) ...

  4. CentOS下X Window与命令行界面的切换

    [Ctrl] + [Alt] + F1~F6:文字界面登陆tt1~tty6 [Ctrl] + [Alt] + F7:图形界面桌面 从文字界面启动图形界面的命令:startx

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

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

  6. codevs 1432 总数统计

    1432 总数统计 时间限制: 1 s空间限制: 128000 KB题目等级 : 钻石 Diamond   题目描述 Description 给出n个数,统计两两之和小于k的方案数之和. 输入描述 I ...

  7. Get&Post登录

    #import "MJViewController.h" @interface MJViewController () @property (weak, nonatomic) IB ...

  8. NSNotificationCenter(通知)与Key-Value Coding (KVC)与Key-Value Observing (KVO)

    NSNotificationCenter //下面是不同类中需要实现的代码 1.[[NSNotificationCenter defaultCenter] addObserver:self selec ...

  9. 自然语言13_Stop words with NLTK

    https://www.pythonprogramming.net/stop-words-nltk-tutorial/?completed=/tokenizing-words-sentences-nl ...

  10. header的安全配置指南

    0x00 背景 在统计了Alexa top 100万网站的header安全分析之后(2012年11月 - 2013年3月 - 2013年11月),我们发现其实如何正确的设置一个header并不是一件容 ...