このコードを敏感にするには

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

これに等しいか、767pxよりも大きな幅のスクリーンのためにあなたの.entryクラスに100ピクセルのマージントップを追加します。

Read more/take a tutorialをご紹介します。

Answer 3

これは達成したいことに近いですか？

commentとentryの幅を100％に設定しました。おそらく両方のdivタグをドキュメントの全幅に拡大したいからです。

幅がドキュメントに関連することは間違いありませんが、これがresponsive designであることを意味するわけではありません。応答性の高いデザインは、viewportを維持します。それをグーグルで試してみてください。あなたの言語で利用可能なチュートリアルはありません。スタックオーバーフローへ

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