如何响应此代码

时间：2017-02-21 18:44:50

标签： css responsive-design

我的问题是这个代码在我使其响应时不起作用。我知道更改高度和宽度必须以百分比变换但是当我使其响应时此代码被损坏。

此代码* 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 我想做这个响应大小和位置感谢并忽略我的错误演讲但我不会说英语:)

3 个答案:

答案 0 :(得分：2)

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

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

    /* put in different CSS code here */

}

答案 1 :(得分：0)

您需要使用媒体查询并定位您想要更改的元素。

例如：

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

对于宽度等于或大于767px的屏幕，这将为您的.entry类添加100px的margin-top。

Read more/take a tutorial作为介绍。

答案 2 :(得分：0)

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

我已将comment和entry的宽度设置为100％，因为您可能希望两个div-tags都扩展到文档的整个宽度。

虽然宽度相对于文档是正确的，但这并不意味着任何一个都是responsive design。响应式设计可以保持viewport。尝试谷歌搜索。您的语言中没有可用的教程非常不可能。

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<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_6290547632102759142_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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题