移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 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实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )的更多相关文章
- Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法
Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...
- 鼠标hover某个元素时其属性表现Css transition 过渡效果(以宽高属性居中放大为例)
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- NGUI 屏幕自适应(初始设定宽高800x480只支持比其大的屏幕)
自适应讲解部分可以参考以下网址:http://www.xuanyusong.com/archives/2536,下面代码中提到的AdaptiveManualHeight()函数就是参考该文章的. 下面 ...
- 移动端H5页面自适应手机屏幕宽度
1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem ...
- 移动页面HTML5自适应手机屏幕宽度
标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...
- android webview使用心得 屏幕宽度自适应
webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮 让Webview加载的页面居中显示有我知道的 ...
- Android程序对不同手机屏幕分辨率自适应的方法
相信各位Android开发爱好者都知道,由于OEM之间的竞争,各种Android操作系统的手机简直就是琳琅满目,屏幕分辨率的差异可想而知.目前比较主流的有WVGA=800x480,HVGA=480x3 ...
- css样式: 宽高按一定比例进行自适应
纯 CSS 实现高度与宽度成比例的效果 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 ...
- CSS实现宽度自适应100%,宽高16:9的比例的矩形
现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 代码 HTML &l ...
随机推荐
- BZOJ1070 [SCOI2007]修车
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
- Visual Studio多版本进行切换的研究
最近在升级公司内部的项目到最新的开发工具Visual Studio 2015,可能在团队开发上会遇到这些问题: 1.团队成员的电脑和系统,设置安装的开发工具参差不齐 2.有些成员的Visual Stu ...
- Adding New Functions to MySQL(User-Defined Function Interface UDF、Native Function)
catalog . How to Add New Functions to MySQL . Features of the User-Defined Function Interface . User ...
- 通过Calendar类判断是否是周末及是否在指定时间
package time; import java.sql.Timestamp; import java.util.Calendar; import java.util.Date; public cl ...
- MOOCULUS微积分-2: 数列与级数学习笔记 2. Series
此课程(MOOCULUS-2 "Sequences and Series")由Ohio State University于2014年在Coursera平台讲授. PDF格式教材下载 ...
- 屠蛟之路_重登数据库大山_SecondDay
重登数据库大山 屠蛟少年们痛定思痛,(2.0正式改名,咳咳),整顿之后,开启新的屠蛟之路. 然而现实摆在他们面前的是,如果想要往东追击beta怪蛟,就要重新攀登上绵亘数千里.有万丈高的数据库大山脉.不 ...
- Deep Learning in NLP (一)词向量和语言模型
原文转载:http://licstar.net/archives/328 Deep Learning 算法已经在图像和音频领域取得了惊人的成果,但是在 NLP 领域中尚未见到如此激动人心的结果.关于这 ...
- IOS基础之 (设计模式)
一 工厂方法 工厂方法方便我们快速创建类的实例的方法.通过工厂方法,可以让调用过程更加清晰. Person.h #import <Foundation/Foundation.h> @int ...
- Altium Designer 15 --- Design PCB Frame by Rhinoceros
step 1: Draw a PCB shape and the main component placed in the PCB. The drawing sheet should be in th ...
- 64位centos下安装python的PIL模块
http://blog.csdn.net/xiaojun1288/article/details/8673529