e 与我们用来编写的普通 css 也适用于移动设备,无论使用何种移动设备。我正在开发移动应用程序,我在其中编写了以下 css 来显示一些数据
<div style="float: left; width: 90%; margin: 0 auto;">
<div style="float: left; width: 20%; height: auto;">
<img style="height: 100px; width: 100px;"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvYw0Fzp3l9dRMBOyRr-MVP_sDgMpyH2V5-iOjHVTzIqlJuwiv3Nsd7fE4" />
</div>
<div style="float: left; width: 70%">
<div style="padding-left: 7%; float: left;">
<p>Name:</p>
</div>
<div style="float: left; margin-left: 1%;">
ABCD
</div>
</div>
</div>
但是当我在模拟器中用不同的模拟器查看它时,o/p 显示如下。有人可以帮助我吗。
根据答案编辑
/*IPad*/
@media only screen and (min-device-width: 1114px) and (max-device-height: 1391px) and (orientation:portrait)
{
#divName
{
margin-left: -6%;
float: left;
}
}
@media only screen and (min-device-width: 1114px) and (max-device-height: 1391px) and (orientation:landscape)
{
#divName
{
margin-left: -11%;
float: left;
}
}
/*IPhone*/
@media all and (min-device-width: 440px) and (max-device-height: 802px) and (orientation:landscape)
{
#divName
{
margin-left: 7%;
float: left;
}
}
@media all and (min-device-width: 440px) and (max-device-height: 802px) and (orientation:portrait)
{
#divName
{
margin-left: 25%;
float: left;
}
}
<div style="float: left; width: 70%">
<div id="divName">
<p>Name:</p>
</div>
<!--<div style="float: left; margin-left: 1%;">
ABCD
</div>-->
</div>
最佳答案
您可以为每个方向创建不同的样式:
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}
@media all and (orientation:landscape) {
/* Style adjustments for landscape mode goes here */
}
并进一步研究媒体查询
。
关于移动设备的CSS调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21374315/