Question

您好：我正在尝试在不同设备上更改CSS（wordpress）（响应）。我在我的子主题css文件中使用@media查询。但我发现我的查询是＆＃34;重叠＆＃34;适用于iPad和iPhone。

这是我用于iPad的内容：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (orientation : portrait)

以下是我用于iPhone的内容：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px)

我发现在我的iPhone上 - 它在两个查询中都使用了两种风格......

我还有一个名为＆＃34; mobile＆＃34;这让我可以使用＆＃34; is_mobile＆＃34;和＆＃34; is_tablet＆＃34;等等非常有帮助...

所以我要做的是确保我的CSS仅适用于手机，或仅适用于平板电脑，而且这些媒体查询似乎不如我想象的那么可靠......

移动插件可以很好地将它们分离出来;但是我不能在＆＃34; style.css＆＃34;中使用PHP if语句。文件

所以这是我的问题：

有没有更好的方法来编写两个@media查询，以便它们更清楚地只适用于我想要的设备？

非常感谢......

Answer 1

这是我根据屏幕宽度改变css的方法。希望它有所帮助。

@media only screen and (max-width: 768px) {

body
{
    margin:0px;
}
#wrapper
{
    min-width: 0px;
    width:auto;
}
#content
{
    margin-left: 0px;
}
#nav
{
    float:none;
    width: auto;
    padding: 0px;
}
#nav ul
{
    text-align: center;
}
#nav li
{
    display: inline;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0.75em;
    padding-right: 0.75em;
}
footer
{
    margin-left: 0;
}
}
@media only screen and (max-width: 480px) {
body
{
    margin: 0px;
}
label
{
    float: none;
    text-align: left;
}
#wrapper
{
    width: auto;
    min-width: 0;
    margin: 0;
}
#content
{
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    padding-right: 1em;
    padding-left: 1em;
}
h1
{
    margin: 0;
    font-size: 1.5em;
    padding-left: 0.3em;
}
#nav ul
{
    padding: 0px;
}
#nav li
{
    display: block;
    margin: 0px;
    border-style: solid;
    border-width: 2px;
    border-color: #330000;
}
#nav
{
    display: block;
}
#content img
{
    float: none;
    padding: 0px;
    margin: 0.1em;
}
#mobile
{
    display: inline;
}
#desktop
{
    display: none;
}
}

Answer 2

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

使@media查询更具体，更集中

2 个答案: