我在 CSS 中声明了一个名为#inner 的类,以应用于具有该属性的某个 div,width: 50%;
但我希望在移动设备上查看它时 width 属性为 100%width: 100%;
我曾想过通过以下方式进行操作,但我已在智能手机上尝试过,但它不起作用:
#inner {
width: 50%;
margin: 0 auto;
padding: 0 20px;
background: #ffffff;
border-radius: 10px;
padding: 40px;
}
@media screen and (max-width: 480px){
#inner{
width: 100%;
}
}
我怎样才能让它工作?
确保你
HTML
有它meta-viewport
,以及将宽度更改为 100% 时的提示,使用你给 div 的填充,它将生成水平滚动,因此对于calc
100% 的页面,你将减去The on80px
的总和你40px
用.div
padding
您所做的并没有错,但您的智能手机的分辨率可能高于您在媒体查询中声明的分辨率,因此
width: 100%
. 最好的选择是先做所谓的移动,这意味着它首先在移动中建模,然后添加平板电脑的媒体查询,最后添加桌面。您应该知道的另一件事是,类是属性
class
,并且从css中调用,例如,带有“点”,.inner {}
id 带有标签。