移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

序言：应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ，以备后用

LESS代码：

.adaptive-circle {margin: 50px auto 0;width: 80%;height: 0;padding-top: 80%;border-radius: 100%;border: 1px solid #000;box-sizing: border-box; // for .layout { height: 100%; }position: relative;.layout {position: absolute;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;text-align: center;&.middle {&:before {display: inline-block;vertical-align: middle;content: '';height: 100%;width: 0;overflow: hidden;}div:first-child {display: inline-block;vertical-align: middle;}}}
}

View Code

CSS代码：

<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>

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>

View Code

示例链接：http://jsbin.com/wazovezima/edit?html,output

例图：

PS:转载请注明出处，博客园(杨君华)

转载于:https://www.cnblogs.com/yangjunhua/p/5216438.html

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )相关推荐

微信小程序canvas 画动态圆环百分比进度条实例根据手机屏幕宽度自适应放大缩小
这里是wxml代码: <component-analysis-report active="0" bindselectReport="selectReport&qu ...
Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法
Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...
移动端H5页面自适应手机屏幕宽度
https://www.cnblogs.com/yzadd/p/6437664.html 移动端H5页面自适应手机屏幕宽度 1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点 ...
移动页面自适应手机屏幕宽度
关于移动页面自适应手机屏幕宽度的一点总结[站在巨人的肩膀上] 使用meta标签最常用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所 ...
Android程序对不同手机屏幕分辨率自适应的总结
各种Android操作系统的手机简直就是琳琅满目,屏幕分辨率的差异可想而知.目前比较主流的有WVGA=800x480,HVGA=480x320,另外的还有QVGA=320x240.当然还有魅族M9的D ...
vue移动端通过px动态计算图片宽高_vue图片宽高自适应_移动web图片高度自适应的解决方案...
由于图片的加载是在dom加载完成之后进行的,于是,在手机端浏览网页时,经常会看到页面刚打开时很多内容叠在一起,当图片加载完成后,页面会由于图片加载完成出现明显的抖动针对这个问题,有以下几种解决方案 ...
css实现九宫格，不定宽高百分比（使用padding实现Div高度根据自适应宽度（百分比）调整）
css实现九宫格,但不一定有9个,可能有8个.7个,每两个格子间距是10px,一行放置3个格子,格子宽高比为1:2(最右的面试题) <div class="box">& ...
HTML5 实现图片宽度自适应手机屏幕宽度的CSS
HTML5实现图片自适应手机屏幕页面的css. HTML5写手机页面,读取图片,如果图片大于手机屏幕的宽度,就显示100%屏幕,如果小于,就显示原图. CSS的max-width就能实现了,切不要设置 ...
编写css让一个已知宽高的div元素水平居中？垂直居中
让一个已知宽高的div元素水平居中 <style> #div1{ width:200px; height:200px; background:#F00; margin:0 auto; } ...

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )相关推荐

最新文章

热门文章