html - 响应式网页内容

Question

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

这段代码可以吗？

@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

Answer 1

我在控制台中发现了很多错误。无论如何我都无法解决所有这些问题，但我可以告诉你，当你制作响应式模板时，你需要处理宽度。这些是我尝试管理您的模板的一些 css 行，希望对您有所帮助按原样放置它们

@media(max-width:714px){

.posts .post-item{width:96%}
.text5{width:100%}
#navmenu ul{width:90%}
}