响应的网页内容

时间:2013-12-24 08:59:07

标签: html css responsive-design

我使用媒体查询,我希望我的网页上的内容能够快速响应。

这段代码好吗?

@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

的代码

3 个答案:

答案 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列网格布局系统为您完成许多艰苦的工作。