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主题。我有一个侧边栏。在侧栏左侧，我的内容是我想：

包括三个彼此相邻的圆圈
每个圆圈都是不同的颜色
每个圆圈都有文字，第二个和第三个圆圈有一个句子，第一个圆圈有三个短语，我想在圆圈的不同行上显示我希望在每个圆圈上面都有文字;价值观，使命和愿景分别位于每个圆圈的中心
因为可以从不同的设备访问该网站，我想确保它具有适当的响应能力

上述代码的问题

我想知道我是否正确接近代码
第一个圆圈，我设置的方式，不是将短语放在圆圈中的单独行中
我不知道如何将文字放在圈子上方
在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

}

响应性css相邻的圆圈，文本在里面，文本在上面居中

1 个答案: