css - 如何使此代码响应

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我想做这个响应大小和位置谢谢并忽略我的言语错误，但我不会说英语:)

Answer 1

它没有响应，因为您的 CSS 中没有媒体查询。截至目前，无论屏幕大小如何，您的代码都会运行，但假设您希望在手机上看起来有所不同，那么您可以这样做:

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

    /* put in different CSS code here */

}