Wie reagiere ich diesen Code

Question

mein Problem ist dieser Code, der nicht funktioniert, wenn ich es reaktionsfähig machen .. Ich weiß, um Höhe und Breite ändern müssen in Prozent ändern, aber dieser Code ist beschädigt, wenn ich es reaktionsfähig machen ..

Dieser Code * Css (was ich möchte es in Reaktion auf Transformation):

@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; 
} 

Vielleicht Demo https://codepen.io/GARDFIELD3/pen/zNgmMP Sie suchen müssen möchte ich diese bzw. tun Onsive, dass Größe und Position Vielen Dank und ignorieren Sie meine Sprachfehler, aber ich spreche kein Englisch :)

Answer 1

Es reagiert nicht, weil Sie keine Medienabfragen in Ihrem CSS haben. Ab jetzt wird der Code unabhängig von der Bildschirmgröße laufen, aber lassen Sie uns sagen, Sie anders auf einem Handy suchen wollte, dann würden Sie so etwas tun:

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

    /* put in different CSS code here */ 

} 

Answer 2

Sie benötigen Medienanfragen und Ziel verwenden welches Element Sie auch ändern möchten.

Zum Beispiel:

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

Dies wird ein margin-top von 100px auf Ihre .entry Klasse für Bildschirme mit einer Breite, die gleich oder größer als 767px hinzuzufügen.

Read more/take a tutorial als eine Einführung.

Answer 3

Ist das näher an dem, was Sie erreichen möchten?

Ich habe die Breite von comment und entry auf 100% festgelegt, weil Sie wahrscheinlich beide div-Tags auf die volle Breite des Dokuments erweitern möchten.

Obwohl es wahr ist, dass die Breite relativ zum Dokument sein wird, bedeutet dies nicht, dass dies responsive design ist. Responsive Design hält die viewport in Bezug. Versuchen Sie das zu googeln. Es ist sehr unwahrscheinlich, dass in Ihrer Sprache keine Tutorials verfügbar sind.

@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>