使两个百分比敏感

Question

我有两个宽度为45％，每个彼此相邻的div。

<div class="rightbox"> text </div><div class="leftbox"> text </div> 


.rightbox { 
margin-top:40px; 
border:1px solid red; 
float:right; 
width:45%; 
height:500px; 
background-color:rgba(155,195,207,1); 
} 

.leftbox { 
margin-top:40px; 
border:1px solid black; 
float:left; 
width:45%; 
height:500px; 
background-color:rgba(155,195,207,1); 
} 

如何让rightbox响应下拉leftbox下面

Answer 1

定义@media查询您要下来响应放弃框中的屏幕。

比如你有480屏幕后做那么CSS应该是

@media all and (max-width:480px){ 
    .rightbox, .leftbox{ 
     float:none; 
     width:100%; 
    } 
} 

这个CSS将只适用，如果屏幕宽度小于或等于480像素;

有关使用@media查询你需要使用视meta标签也检测屏幕的宽度则只有@media查询做工精细的所有设备完美的结果。

Meta标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">