Question

<style>
// To show on laptop
#lala {
position: absolute; 
top: -520px; 
right:-250px;
}
// To show on iPhone
@media screen and (device-width:480px) {
#lala{
top:0;
}
}
// To show on tablets
@media screen and (device-width:768px) {
#lala{
top: 1;
right: 0;
}
}
</style>
<div id="lala">
[contactform]
</div>

我尝试使用max-device-width和min-device-with切换，但我无法做到正确。我想为每个设备设置不同的联系表单样式，我做错了什么？

因此，如果宽度=== 768px显示{ }之间的样式，如果宽度=== 480px显示{ }之间的样式，则显示标准样式。

Answer 1

尝试

<style>
// To show on laptop
#lala {
position: absolute; 
top: -520px; 
right:-250px;
}
// To show on iPhone
@media (max-width: 480px) {
#lala{
top:0;
}
}
// To show on tablets
@media (max-width: 768px) {
#lala{
top: 1;
right: 0;
}
}
</style>
<div id="lala">
[contactform]
</div>

确保你有

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

里面的

<head></head>

适用于iPad / iPhone /桌面的不同div风格

1 个答案: