Question

媒体查询有时无法正常工作。

我已经写了两次媒体查询，当第三次写出屏幕尺寸“ @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,
          },    
        }
      },
    );

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

Answer 1

您在此行中遇到的问题，

@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)

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

Ref

mediaQuery无法在react-native中工作

1 个答案: