Css 如何使此代码具有响应性

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

此代码*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;
}

也许你需要看看演示版

---

我想做这件事，因为你的CSS中没有媒体查询，所以它没有响应性。现在，无论屏幕大小如何，您的代码都将运行，但假设您希望在手机上看起来有所不同，那么您将执行以下操作：

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

    /* put in different CSS code here */

}

---

它没有响应，因为CSS中没有媒体查询。现在，无论屏幕大小如何，您的代码都将运行，但假设您希望在手机上看起来有所不同，那么您将执行以下操作：

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

    /* put in different CSS code here */

}

---

您需要使用媒体查询，并以要更改的元素为目标

例如：

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

这将为宽度等于或大于767px的屏幕的

.entry

类添加100px的页边距

---

作为介绍。

您需要使用媒体查询，并针对您想要更改的元素

例如：

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

这将为宽度等于或大于767px的屏幕的

.entry

类添加100px的页边距

---

作为介绍。

这是否更接近您想要实现的目标

我已经将

comment

和

entry

的宽度设置为100%，因为您可能希望两个div标记都扩展到文档的全宽

虽然宽度确实是相对于文档的，但这并不意味着这一切都是响应性设计。响应性设计保持了

视口

。试试谷歌搜索。您的语言中不太可能没有可用的教程

@导入url(http://weloveiconfonts.com/api/?family=entypo);
@媒体屏幕和屏幕（最大宽度：420px）{
/*entypo*/}
[class*=“entypo-”]：之前{
字体系列：“entypo”，无衬线；
}
.进入{
宽度：100%；
位置：相对位置；
顶部：60PX；
左：5PX；
保证金：50px自动；
边界半径：50%；
浮动：左；
}
.集装箱{
位置：相对位置；
宽度：110px；
高度：110px；
利润率：0.30px 10px；
边界半径：60px；
背景：rgba（255255,2）；
盒影：3p3p5pRGBA（0,0,0,2）；
过渡：全部5秒；
溢出：隐藏；
}
.照片{
宽度：90px；
高度：90px；
利润率：8px；
边界半径：50%；
位置：绝对位置；
左：0px；
溢出：隐藏；
边框：2倍纯白；
}
.pic{最大宽度：100%；}
.按钮{
宽度：60px；
高度：60px；
位置：绝对位置；
右：20px；
顶部：25px；
字体大小：40px；
文本对齐：居中；
线高：60px；
边界半径：50%；
颜色：rgba（255255.8）；
背景：绿色；
背景：线性梯度（底部，#5ca321，#8ab24f）；
长方体阴影：0 1px rgba（0,0,0,2），
0 5px rgba（255255255.1），
06pxrgba（0,0,0,2）；
过渡：全部5秒；
光标：指针；
}
.按钮：悬停{
背景：#5ca321；
盒影：插入0 1px 5px rgba（0,0,0,3）；
文本阴影：0px 0px 5px灰色；
}
.姓名{
身高：60%；
宽度：180px；
位置：绝对位置；
右：80px；
填充：20px；
字体：25px arial；
颜色：白色；
不透明度：0；
过渡：全部5秒5秒；
文本阴影：0.5pxRGBA（0,0,0,5）；
}
.small{字体大小：14px；显示：块；页边空白顶部：10px；}
.评论{
宽度：100%；
位置：相对位置；
填充：15px；
字体大小：16px；
颜色：rgba（0,0,0,7）；
边界半径：10px；
背景：rgba（255255,4）；
盒影：3p3p5pRGBA（0,0,0,2）；
不透明度：0；
过渡：所有1；
}
.评论：之前{
内容：''；
宽度：0；
身高：0；
位置：绝对位置；
底部：100%；
左：2%；
边框底部：15px实心rgba（255255.4）；
左边框：50px实心透明；
右边框：50px实心透明；
边框顶部：15px实心透明；
}
.container:悬停{宽度：100%；}
.container:hover.name、.container:hover+.comment{
不透明度：1；
}

昂贵的
火锅
敬礼，我希望君士坦丁能够成为一名伟大的创造者：）我希望他能成为一名国际企业的首席印刷师，我是潘特鲁·德塔利（pentru detalii）：）
Gardfield这是否更接近您想要实现的目标

我已经将
comment
和
entry
的宽度设置为100%，因为您可能希望两个div标记都扩展到文档的全宽

虽然宽度确实是相对于文档的，但这并不意味着这一切都是响应性设计。响应性设计保持了
视口
。试试谷歌搜索。您的语言中不太可能没有可用的教程


@导入url(http://weloveiconfonts.com/api/?family=entypo);
@媒体屏幕和屏幕（最大宽度：420px）{
/*entypo*/}
[class*=“entypo-”]：之前{
字体系列：“entypo”，无衬线；
}
.进入{
宽度：100%；
位置：相对位置；
顶部：60PX；
左：5PX；
保证金：50px自动；
边界半径：50%；
浮动：左；
}
.集装箱{
位置：相对位置；
宽度：110px；
高度：110px；
利润率：0.30px 10px；
边界半径：60px；
背景：rgba（255255,2）；
盒影：3p3p5pRGBA（0,0,0,2）；
过渡：全部5秒；
溢出：隐藏；
}
.照片{
宽度：90px；
高度：90px；
利润率：8px；
边界半径：50%；
位置：绝对位置；
左：0px；
溢出：隐藏；
边框：2倍纯白；
}
.pic{最大宽度：100%；}
.按钮{
宽度：60px；
高度：60px；
位置：绝对位置；
右：20px；
顶部：25px；
字体大小：40px；
文本对齐：居中；
线高：60px；
边界半径：50%；
颜色：rgba（255255.8）；
背景：绿色；
背景：