手机屏幕上的显示块

在手机上查看本网站，您将了解我正在尝试做什么。 This is my website 手机屏幕上的显示块

请注意wix上的索引如何在手机上变为display: block。我的意思是your success and the two other boxes。

我试图做同样的事情，在调整浏览器大小时，它在桌面上工作得很糟糕，但在移动设备上却没有。

我有index_whitebox和index_whitebox_2和index_whitebox_3

它是这样的：

CSS

.index_whitebox{ 
    min-height: 380px; 
    width: 25%; 
    position: relative; 
    float: left; 
    margin-left: 6%; 
    border: 2px solid rgba(255, 255, 255, 1); 
    background-color: rgba(255, 255, 255, 1); 
    border-radius: 5px; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 
    display: inline-block; 
}

相同的CSS与其他两个盒子在空白处细微的差别。至于媒体查询：

CSS

@media screen and (max-width: 500px) { 

    .index_whitebox{ 
     min-height: 0; 
     width: 90%; 
     position: relative; 
     float: none; 
     margin-left: auto 
     margin: auto; 
     border: 2px solid rgba(255, 255, 255, 1); 
     background-color: rgba(255, 255, 255, 1); 
     border-radius: 5px; 
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 
     display: block; 
    } 

}

HTML

<div class="whitebox_wrapper"> 
    <div class="index_whitebox"> 
     <div class="index_title"> 
      title 
     </div> 
     <div class="index_image"> 
     </div> 
     <div class="index_article"> 
      <div class="index_first_cell_text_wrapper"> 
      </div> 
     </div> 
     <div id="index_nav_container"> 
      <a href="contact.html" class="navButton_2">Contact</a> 
     </div> 
    </div> 
</div>

和相同的HTML为其他框。

来源

2016-08-23 Lynob

根据您使用的引导作为框架页面源代码。既然如此，为什么不使用他们的网格和响应式实用程序，因为这两者的任何组合都将为您提供纯类解决方案，而不必编写自定义媒体查询。 –

你想创建相同还是试图使其响应？ –

@RobertC我刚加了bootstrap，看看能不能解决问题，但是我没有尝试，恐怕我可能不得不重新设计整个事情 – Lynob

在你的CSS文件，将这个

@media screen and (max-width: 768px) { 
    .header{min-width:100%;} 
    #banner{min-width:100% !important;} 
    .whitebox_wrapper{min-width:100%;} 
    .index_wrapper{width:100%;} 
}

它可以帮助你

来源

2016-08-23 13:47:01

谢谢！它的工作，仍然垃圾，但至少我看到的东西 – Lynob

你会帮助回答这个http://stackoverflow.com/questions/39100071/using-a-toggle-navigation-on-mobile-screens即时难以调整切换按钮并正确显示 – Lynob

手机屏幕上的显示块

回答

相关问题