css - 响应式 css 相邻圆圈，里面有文字，上面有文字居中

Question

我找到了几个问题和答案，例如Responsive CSS circles that can hold centered content和 Responsive CSS / Inline divs接近我的需要，但我需要对解决方案进行一些修改。

我整理了以下代码:

CSS

.mission-vision-circles {
width: 200px;
height: 200px;
-webkit-border-radius: 100px 100px 100px 100px;
-moz-border-radius: 100px 100px 100px 100px;
border-radius: 100px 100px 100px 100px;
-webkit-box-shadow: 2px 2px 2px 2px #ddd;
box-shadow: 2px 2px 2px 2px #ddd;
padding: 5px;
margin: 5px;
float: left;
text-align: center;
}

  .orange {
    border: 0px solid #E05900;
    background: #e05900;
}

.gray {
    border: 0px solid #796e67;
    background: #796e67;
}

.dark {
    border: 0px solid #333;
    background: #333;
}

.mvv-circles-text {
    color: #fff;
    width: 90%;
    height: 90%;
    margin: 25% auto 0 auto;
}

HTML

<div class="mission-vision-circles gray"><p class="mvv-circles-text">Personal growth</p></div>

    <div class="mission-vision-circles orange"><p class="mvv-circles-text">To see us all living our lives stretched beyond the limitations imposed by our minds.</p></div>

    <div class="mission-vision-circles dark"><p class="mvv-circles-text">To share stories and experiences about reframing limiting mindsets in order to help you get out of your own way.</p> </div>

首先是我想做什么，然后是我做了什么。

我正在为 Wordpress 开发 Genesis 主题。我有一个侧边栏。在边栏的左侧，我有我想要的内容:

1. 包括三个彼此相邻的圆圈
2. 每个圆圈都是不同的颜色
3. 每个圆圈都有文字，第二个和第三个圆圈有一个句子，第一个有三个短语，我想在圆圈的不同行上显示 我想在每个圆圈上方都有文字；值(value)观、使命和愿景，分别以每个圆圈为中心
4. 因为可以从不同的设备访问该网站，所以我想确保它具有适当的响应能力

上面代码的问题

1. 我想知道我是否正确处理代码
2. 第一个圆圈，按照我的设置方式，没有将短语放在圆圈的不同行上
3. 我不知道如何将文字放在圆圈上方
4. 在 iPad 上，第三个圆圈移动到其他两个圆圈下方，圆圈下方的文本向上移动到第二个圆圈的右侧(我只能从我的笔记本电脑、iPad 和我的电脑上测试代码iPhone，但我想确保它适用于其他手持设备)

如果有任何改进建议，我愿意接受。

谢谢

Answer 1

您可以添加 css 媒体查询并控制圆圈的大小和位置。

试试这个 http://jsfiddle.net/23V3w/

 @media screen and (max-width: 1024px) {
 your font  style goes here

 }

@media screen and (max-width: 950px) {
your font  style goes here

 }


 @media screen and (max-width: 650px) {
 your font  style goes here


 }

 @media screen and (max-width: 480px) {
 your font  style goes here

}