如何使用vw单位在css中创建响应式圈子？

我用CSS创建了两个相同大小的圆。通过编码，桌面屏幕上的输出很好。但是当我在手机上查看输出时，该圆圈重叠。我听说大众汽车部门对于响应式页面设计非常有用。这就是我使用大众汽车的原因。任何其他技术也欢迎。如何使用vw单位在css中创建响应式圈子？

HTML：

<div class="circle1"> Hello I am a Circle1 </div> 
    <div class="circle2"> Hello I am a Circle2 </div>

CSS：

.circle1 
    { 
    width:100px; 
    height: 100px; 
    border-radius: 50%; 
    font-size: 10px; 
    color:#F7FAF7; 
    line-height: 100px; 
    text-align: center; 
    background:#000; 
    position: fixed; 
    top: 0vh; 
    left: 0vw; 
    }  
.circle2 
    { 
    width:100px; 
    height: 100px; 
    border-radius: 50%; 
    font-size: 10px; 
    color:#F7FAF7; 
    line-height: 100px; 
    text-align: center; 
    background:#000; 
    position: fixed; 
    top: 0vh; 
    left: 8vw; 
    }

来源

2017-07-21 nawas

你可以让你尝试在台式机和移动完成什么草图？ – murb

我需要几个相隔一定距离的圆圈。现在我只用了两圈。 – nawas

是固定义务吗？ –

这个问题是非常开放式的，当你在代码中写的是什么取决于你想要什么。

如果你正在寻找一排圈子，也许你应该使用浮动。如果该行中没有足够的空间，它将导致您的圈子在下一行中移动。而且，它在所有设备上看起来不错，因为没有任何重叠或缩小。

样品：

.circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    font-size: 10px; 
 
    color: #F7FAF7; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    background: #000; 
 
    float: left; 
 
    margin: 5px; 
 
    padding: 5px; 
 
}

<div class="circle"> Hello I am a Circle1 </div> 
 
<div class="circle"> Hello I am a Circle2 </div> 
 
<div class="circle"> Hello I am a Circle3 </div> 
 
<div class="circle"> Hello I am a Circle4 </div>

如果你正在寻找一个中心圆周围有对齐所有其他圈子里，也许相对位置比较好。但是这看起来不像在移动设备上看起来不错的那种设计。

样品：

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.main { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    font-size: 10px; 
 
    color: #F7FAF7; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    background: #abf; 
 
    left: 200px; 
 
    top: 200px; 
 
} 
 

 
.circle { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    font-size: 10px; 
 
    color: #F7FAF7; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    background: #456; 
 
} 
 

 
.pos1 { 
 
    top: 120px; 
 
    left: 0px; 
 
} 
 

 
.pos2 { 
 
    top: -120px; 
 
    left: 0px; 
 
} 
 

 
.pos3 { 
 
    top: 0px; 
 
    left: 120px; 
 
} 
 

 
.pos4 { 
 
    top: 0px; 
 
    left: -120px; 
 
}

<div class="main"> 
 
    Main circle 
 
    <div class="circle pos1"> Hello I am a Circle1 </div> 
 
    <div class="circle pos2"> Hello I am a Circle2 </div> 
 
    <div class="circle pos3"> Hello I am a Circle3 </div> 
 
    <div class="circle pos4"> Hello I am a Circle4 </div> 
 
</div>

来源

2017-07-21 10:35:35

如何使用vw单位在css中创建响应式圈子？

回答

相关问题