使 div 内容具有响应性 [英] Making div content responsive
本文介绍了使 div 内容具有响应性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的内容目前没有响应.我已经在 iPhone 上对其进行了测试,并且文本会越过屏幕.
My content isn't responsive at the moment. I've tested it on iPhone and the text goes over the screen.
我已将容器的 CSS 更改为:
I've changed the CSS of my container to:
#container2 {
width: 960px;
max-width: 90%;
position: relative;
left: 50%;
margin-left: -480px;
line-height: 1.4em;
}
当我更改后测试时,内容消失了.我读到 put max-width:90%;将允许它不超过边界宽度(http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design)但显然它不起作用.我做错了什么?
When I test it after the change, the content disappears. I read that putting max-width:90%; would allow it to not exceed the boundary width (http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design) but obviously it didn't work. What am I doing wrong?
推荐答案
试试这个 css:
/* Show in default resolution screen*/
#container2 {
width: 960px;
position: relative;
margin:0 auto;
line-height: 1.4em;
}
/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */
@media only screen and (max-width: 479px){
#container2 { width: 90%; }
}
演示如下:http://jsfiddle.net/ongisnade/CG9WN/
这篇关于使 div 内容具有响应性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文