如何使这个代码响应

Question

我的问题是这个代码，当我使它响应时，它不起作用..我知道改变高度和宽度必须在百分比中转换，但是当我使它响应时，这个代码被破坏..

此代码*的CSS（我想将其改造成响应）：

@import url(http://weloveiconfonts.com/api/?family=entypo); 

/* entypo */ 
[class*="entypo-"]:before { 
    font-family: 'entypo', sans-serif; 
} 




.entry{ 
    width:430px; 
    position: RELATIVE; 
    top:600PX; 
    LEFT: 5PX; 
    margin:50px auto; 
    border-radius:50%; 
    float:left; 

} 


.container{ 
    width:110px; 
    height:110px; 
    margin:0 0 30px 10px; 
    position:relative; 
    border-radius:60px; 
    background:rgba(255,255,255,.2); 
    box-shadow:3px 3px 5px rgba(0,0,0,.2); 
    transition:all .5s; 
    overflow:hidden; 

} 

.photo{ 
    width:90px; 
    height:90px; 
    margin:8px; 
    border-radius:50%; 
    position:absolute; 
    left:0px; 
    overflow:hidden; 
    border:2px solid white; 
} 

.pic{ max-width:100%; } 

.button{ 
    width:60px; 
    height:60px; 
    position:absolute; 
    right:20px; 
    top:25px; 
    font-size:40px; 
    text-align:center; 
    line-height:60px; 
    border-radius:50%; 
    color:rgba(255,255,255,.8); 
    background:green; 
    background:linear-gradient(bottom,#5ca321,#8ab24f); 
    box-shadow:0 0 0 1px rgba(0,0,0,.2), 
      0 0 0 5px rgba(255,255,255,.1), 
      0 0 0 6px rgba(0,0,0,.2); 
    transition:all .5s; 
    cursor:pointer; 
} 
.button:hover{ 
    background:#5ca321; 
    box-shadow:inset 0 1px 5px rgba(0,0,0,.3); 
    text-shadow:0px 0px 5px gray; 
} 

.name{ 

    height:60%; 
    width:180px; 
    position:absolute; 
    right:80px; 
    padding:20px; 
    font:25px arial; 
    color:white; 
    opacity:0; 
    transition:all .5s .5s; 
    text-shadow:0 0 5px rgba(0,0,0,.5); 
} 

.small{ font-size:14px; display:block; margin-top:10px; } 

.comment{ 
    width:370px; 
    position:relative; 
    padding:15px; 
    font-size:16px; 
    color:rgba(0,0,0,.7); 
    border-radius:10px; 
    background:rgba(255,255,255,.4); 
    box-shadow:3px 3px 5px rgba(0,0,0,.2); 
    opacity:0; 
    transition:all 1s; 
} 

.comment:before{ 
    content:''; 
    width:0; 
    height:0; 
    position:absolute; 
    bottom:100%; 
    left:2%; 
    border-bottom:15px solid rgba(255,255,255,.4); 
    border-left:50px solid transparent; 
    border-right:50px solid transparent; 
    border-top:15px solid transparent; 

} 

.container:hover{ width:400px; } 

.container:hover .name,.container:hover + .comment{ 
    opacity:1; 
} 

也许你需要看一下演示 https://codepen.io/GARDFIELD3/pen/zNgmMP 我想这样做RESP对这个大小和位置感兴趣感谢并忽略我的言语错误，但我不会说英语:)

Answer 1

由于在CSS中没有媒体查询，因此它没有响应。截至目前，您的代码将无论运行的屏幕尺寸，但让我们说，你想看看不同的手机，那么你会做这样的事情：

@media screen and (max-width: 420px) { 

    /* put in different CSS code here */ 

} 

Answer 2

您需要使用媒体查询和目标无论您想要更改哪个元素。

例如：

@media screen and (min-width: 767px) { 
.entry { 
    margin-top: 100px; 
} 
} 

这将在一个100像素的margin-top添加到您的.entry类宽度等于或大于767px更大的屏幕。

Read more/take a tutorial作为介绍。

Answer 3

这更接近你想要达到的目标吗？

我已将comment和entry的宽度设置为100％，因为您可能希望这两个div标签都展开为文档的整个宽度。

尽管确实宽度是相对于文档的，但这并不意味着这是responsive design。响应式设计保持viewport的重要性。尝试使用Google搜索。你的语言中没有教程是不太可能的。

@import url(http://weloveiconfonts.com/api/?family=entypo); 
 
@media screen and (max-width: 420px) { 
 
/* entypo */} 
 
[class*="entypo-"]:before { 
 
    font-family: 'entypo', sans-serif; 
 
} 
 

 

 

 

 
.entry{ 
 
    width:100%; 
 
    position: RELATIVE; 
 
    top:60PX; 
 
    LEFT: 5PX; 
 
    margin:50px auto; 
 
    border-radius:50%; 
 
    float:left; 
 

 
} 
 

 

 
.container{ 
 
    position:relative; 
 
    width:110px; 
 
    height:110px; 
 
    margin:0 0 30px 10px; 
 
    
 
    border-radius:60px; 
 
    background:rgba(255,255,255,.2); 
 
    box-shadow:3px 3px 5px rgba(0,0,0,.2); 
 
    
 
    transition:all .5s; 
 
    overflow:hidden; 
 
} 
 

 
.photo{ 
 
    width:90px; 
 
    height:90px; 
 
    margin:8px; 
 
    border-radius:50%; 
 
    position:absolute; 
 
    left:0px; 
 
    overflow:hidden; 
 
    border:2px solid white; 
 
} 
 

 
.pic{ max-width:100%; } 
 

 
.button{ 
 
    width:60px; 
 
    height:60px; 
 
    position:absolute; 
 
    right:20px; 
 
    top:25px; 
 
    font-size:40px; 
 
    text-align:center; 
 
    line-height:60px; 
 
    border-radius:50%; 
 
    color:rgba(255,255,255,.8); 
 
    background:green; 
 
    background:linear-gradient(bottom,#5ca321,#8ab24f); 
 
    box-shadow:0 0 0 1px rgba(0,0,0,.2), 
 
      0 0 0 5px rgba(255,255,255,.1), 
 
      0 0 0 6px rgba(0,0,0,.2); 
 
    transition:all .5s; 
 
    cursor:pointer; 
 
} 
 
.button:hover{ 
 
    background:#5ca321; 
 
    box-shadow:inset 0 1px 5px rgba(0,0,0,.3); 
 
    text-shadow:0px 0px 5px gray; 
 
} 
 

 
.name{ 
 
    
 
    height:60%; 
 
    width:180px; 
 
    position:absolute; 
 
    right:80px; 
 
    padding:20px; 
 
    font:25px arial; 
 
    color:white; 
 
    opacity:0; 
 
    transition:all .5s .5s; 
 
    text-shadow:0 0 5px rgba(0,0,0,.5); 
 
} 
 

 
.small{ font-size:14px; display:block; margin-top:10px; } 
 

 
.comment{ 
 
    width:100%; 
 
    position:relative; 
 
    padding:15px; 
 
    font-size:16px; 
 
    color:rgba(0,0,0,.7); 
 
    border-radius:10px; 
 
    background:rgba(255,255,255,.4); 
 
    box-shadow:3px 3px 5px rgba(0,0,0,.2); 
 
    opacity:0; 
 
    transition:all 1s; 
 
} 
 

 
.comment:before{ 
 
    content:''; 
 
    width:0; 
 
    height:0; 
 
    position:absolute; 
 
    bottom:100%; 
 
    left:2%; 
 
    border-bottom:15px solid rgba(255,255,255,.4); 
 
    border-left:50px solid transparent; 
 
    border-right:50px solid transparent; 
 
    border-top:15px solid transparent; 
 
    
 
} 
 

 
.container:hover{ width:100%; } 
 

 
.container:hover .name,.container:hover + .comment{ 
 
    opacity:1; 
 
}

<div class="entry"> 
 
    
 
    <div class="container">  
 
    <div class="button entypo-chat"></div> 
 
    <div class="name">CoStY 
 
     <span class="small">Fondator</span>  
 
    </div> 
 
    <div class="photo"> 
 
     <img src="https://s12.postimg.org/pptidy8kd/14021445_1166695373388266_2759142_n.jpg" alt="" class="pic"> 
 
    </div> 
 
    </div> 
 
    
 
    <p class="comment">Salut, numele meu este Enache Constantin si sunt creatorul acestei comunitati :) Puteti sa ajutati la intretinerea comunitatii printr-o donatie ,pm pentru detalii :) </p> 
 
    
 
</div> 
 

 
<div class="entry"> 
 
    
 
    <div class="container">  
 
    <div class="button entypo-chat"></div> 
 
    <div class="name">Gardfield<3 
 
     <span class="small">Administrator</span>  
 
    </div> 
 
    <div class="photo"> 
 
     <img src="http://farm1.staticflickr.com/133/378977890_40f31e1962_q.jpg" alt="" class="pic"> 
 
    </div> 
 
    </div> 
 
    
 
    <p class="comment">Salut,numele meu este Alexandru Mihai iar misiunea mea este sa dezvolt aceasta comunitate din toate punctele de vedere. Sunt deschis la orice colaborare si ma puteti contacta pentru probleme tehnice printr-un pm :) </p> 
 
    
 
</div>