手机屏幕上的显示块
问题描述:
在手机上查看本网站,您将了解我正在尝试做什么。 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为其他框。
答
在你的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%;}
}
它可以帮助你
根据您使用的引导作为框架页面源代码。既然如此,为什么不使用他们的网格和响应式实用程序,因为这两者的任何组合都将为您提供纯类解决方案,而不必编写自定义媒体查询。 –
你想创建相同还是试图使其响应? –
@RobertC我刚加了bootstrap,看看能不能解决问题,但是我没有尝试,恐怕我可能不得不重新设计整个事情 – Lynob