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行，Hop可以帮助你把它们原样放在

@media(max-width:714px){

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

Answer 2

如果您通过调整浏览器大小来测试自己的响应能力，device-width将不会生效。这是因为计算机屏幕的宽度不会改变。

使用max-width/min-width。它以屏幕上的渲染区域为目标，因此，当您调整大小时，CSS将生效。

device-width定位屏幕分辨率。

max-width/min-wdith定位屏幕呈现区域。

Answer 3

这是一个关于响应式网站的错误方法。您需要一系列媒体查询来满足：

桌面1024px ipad 768px iphone 320px

一旦设置了这些断点，网站将按预期响应，所有内容都需要根据宽度设置为％，以便相应地进行调整。另外，请勿使用px使用em作为字体大小，因为它会自动为您调整。

使用前端框架（例如bootstrap），因为这会通过使用12列网格布局系统为您完成许多艰苦的工作。

响应的网页内容

3 个答案: