使此div响应

我试过宽度为100％，但它没有使其响应。这里是我试图做出反应的链接。它没有响应。帮助codepen link 使此div响应

div { 
 
    background:url(https://i.stack.imgur.com/EinaJ.png) top center; 
 
    width:620px; 
 
    margin:auto; 
 
    padding:40px 40px 30px; 
 
    height:590px; 
 
    position:relative; 
 
    display:flex; 
 
    flex-flow:column; 
 
    justify-content:center; 
 
} 
 
img, p, footer { 
 
    padding:5px; 
 
    margin:0; 
 
    background:pink 
 
} 
 
img { 
 
    margin:auto auto 0; 
 
} 
 
footer { 
 
    bottom:30px; 
 
    right:45px; 
 
    margin:auto 0 0; 
 
    border-radius:0 0 0.25em 0.25em ; 
 
    background:rgba(0,0,0,0.2); 
 
}

<div> 
 
    <img src=""> 
 
    <p>here is</p> 
 
    <footer>footer</footer> 
 
</div>

来源

2017-02-19 koku19

你知道如何响应式设计的作品？你尝试过使用'％'代替'px'，媒体查询吗？ – AymDev

http://codepen.io/gc-nomade/pen/KaEywJ这是链接 – koku19

是的我试过宽度：100％，但它不工作.....图像或文字溢出在调整窗口大小@AymDev – koku19

:root { 
 
    /*the percentage of screen width occupied by a block. 1 = 100% */ 
 
    --percent: .9; 
 
} 
 

 
div { 
 
    background: url(https://i.stack.imgur.com/EinaJ.png) top center; 
 
    background-size: cover; 
 
    /* for old browsers */ 
 
    width: 90vw; 
 
    height: 113.61516034vw; 
 
    /* for new browsers */ 
 
    width: calc(100vw*var(--percent)); 
 
    height: calc((100vw*var(--percent))*866/686); 
 
    box-sizing: border-box; 
 
    margin: auto; 
 
    padding: 40px 40px 30px; 
 
    position: relative; 
 
    display: flex; 
 
    flex-flow: column; 
 
    justify-content: center; 
 
} 
 

 
img, 
 
p, 
 
footer { 
 
    padding: 5px; 
 
    margin: 0; 
 
    /* see me */ 
 
    background: pink 
 
} 
 

 
img { 
 
    margin: auto auto 0; 
 
} 
 

 
footer { 
 
    bottom: 30px; 
 
    right: 45px; 
 
    margin: auto 0 0; 
 
    border-radius: 0 0 0.25em 0.25em; 
 
    /* see me */ 
 
    background: rgba(0, 0, 0, 0.2); 
 
} 
 

 
body { 
 
    background: #777; 
 
}

<div> 
 
    <img src="http://lorempixel.com/200/150" /> 
 
    <p>here is</p> 
 
    <p>some line</p> 
 
    <p>of</p> 
 
    <p>text</p> 
 
    <footer>footer</footer> 
 
</div>

来源

2017-02-19 10:22:08

@ koku19请注意，此解决方案中使用的CSS变量浏览器支持不佳 – LGSon

@LGSon为我的解决方案添加了老的浏览器支持。 –

好，我仍然没有看到使用变量的观点，因为无论如何您必须硬编码图像大小，'866/686'......我的意思是如果它是动态读取的，我可以看到这一点，现在它只是使CSS凌乱读取 – LGSon

的原因，这是不响应是因为你设置的div的宽度和高度，以一个特定的像素。因此它无法调整。

尝试改变像素的百分比：

例如：

width: 50%; 
height: 100%;

来源

2017-02-19 10:11:33

这是不工作，因为它使得白色背景图像看起来很像 – koku19

我看到你想要什么do.You're想拥有的股利中间和响应。设置margin:0 auto;和width:50%;。取出div中的其他位代码。使其对移动屏幕做出响应：

@media only screen and (max-width:set_your_max){ 
    div { width:50%; } 
}

来源

2017-02-19 10:22:01

使此div响应

回答

相关问题