我使用媒体查询,我希望我的网页上的内容能够快速响应。
这段代码好吗?
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){
.navmob{margin-top:0px; margin-left:-100px; margin-right:100px !important; }
.sidebar { display: none; }
#navmenu {margin-top:10px; margin-left:auto; margin-right:100px; }
.content {width:auto; height:auto; margin-left:100px; margin-top:-50px;}
.contentsing{ width:500px; height:auto; margin-left:auto; margin-right:auto; margin-top:-50px !important;}
body{
background-image:none !important;
background-color:#000000 !important;
font-size:12px !important;
}
}
以及为什么内容没有响应......这是example
以下是我的index
的代码答案 0 :(得分:1)
我在控制台中发现了一些错误。无论如何我无法解决所有问题,但我可以告诉你,当你做出模板响应时,你需要在宽度上工作。这些是我试图管理你的模板的一些css行,Hop可以帮助你 把它们原样放在
@media(max-width:714px){
.posts .post-item{width:96%}
.text5{width:100%}
#navmenu ul{width:90%}
}
答案 1 :(得分:1)
如果您通过调整浏览器大小来测试自己的响应能力,device-width
将不会生效。这是因为计算机屏幕的宽度不会改变。
使用max-width/min-width
。它以屏幕上的渲染区域为目标,因此,当您调整大小时,CSS将生效。
device-width
定位屏幕分辨率。
max-width/min-wdith
定位屏幕呈现区域。
答案 2 :(得分:0)
这是一个关于响应式网站的错误方法。您需要一系列媒体查询来满足:
桌面1024px ipad 768px iphone 320px
一旦设置了这些断点,网站将按预期响应,所有内容都需要根据宽度设置为%,以便相应地进行调整。另外,请勿使用px使用em作为字体大小,因为它会自动为您调整。
使用前端框架(例如bootstrap),因为这会通过使用12列网格布局系统为您完成许多艰苦的工作。