1

媒体查询在某些时候不起作用。

我已经写了两次媒体查询，当为屏幕尺寸“@media（max-device-width：360）和（max-device-height：640）”写第三次时，它不起作用。

我刚刚开始编码，无法使其工作。所以任何帮助对我来说都是很有价值的。

    import { MediaQueryStyleSheet } from "react-native-responsive";
      ...//code is here.    
    const styles = MediaQueryStyleSheet.create(
      {
        container: {
          flex: 1
        },
        welcomeImage: {
          width: null,
          height: "83%",
          opacity: 0.5,
          position: "relative",
          resizeMode: "cover",
          alignSelf: "stretch",
          backgroundColor: "#3B3B3B"
        },
        titleContainer: {
          flexDirection: "column",
          alignItems: "center",
          position: "absolute",
        },
        logo: {
          height: 92,
          width: 252,
        },
        tagline: {
          paddingTop: 13,
          alignItems: "center",
          fontSize: 20,
          color: "#FBFBFB",
          textAlign: "center",
          fontFamily: "segoeUI"
        },
      },
      {
        "@media(max-device-width:374) and (max-device-height:811)": {
          welcomeImage: {
            height: "80%"
          },
          logo: {
            width: 226.8,
            height: 82.8,
          },
        }
      },
      {
        "@media(min-device-width:375) and (max-device-height:811)": {
          welcomeImage: {
            height: "80%",
          },
        }
      },
      {
        "@media(max-device-width:360) and (max-device-height:640)": {
          tagline:{
            fontSize:15,
          },    
        }
      },
    );

//它没有显示任何错误。但也不工作。

4

1 回答 1

0

你在这一行的问题，

@media(max-device-width:360) and (max-device-height:640)

您仅设置媒体查询max-width。

媒体查询模式应该是min-width喜欢max-height，

@media (min-device-width : 360) and (max-device-height : 640)

还要确保所有媒体查询都有相同的模式。

参考

于 2019-07-06T06:40:00.320 回答