响应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;
}

<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的创世纪主题工作。我有个侧栏。在侧栏的左边，我有想要的内容

1. 包括三个彼此相邻的圆
2. 每个圆圈都会有不同的颜色
3. 每个圆圈都有文字，第二圈和第三圈有一个句子，第一个圆圈里有三个我想在圆圈上分别显示的短句，我想把文字放在每个圆圈的上方；价值观、使命和愿景，分别以每个圆圈为中心。
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

}