uniapp 小程序样式兼容问题媒体适配@media

问题分析：最开始才用定位 position: absolute; 只能适配当前机型，模拟器上切换机型发现样式不齐！！！

又试了下采用 display: flex; justify-content: space-between; 布局，也还不是行，因为我是需要在背景图上对齐样式，这个方法也不行。

解决：采用@media媒体适配。

        

media-type：表示媒体类型，常见的媒体类型有：

                all：适用于所有设备（默认）

                screen：适用于屏幕设备

                print：适用于打印设备

media-feature：表示媒体特性，比如设备的宽度、高度、分辨率等。 常见的媒体特性有：

                min-width：设备屏幕的最小宽度

                max-width：设备屏幕的最大宽度

                orientation：设备的屏幕方向（横向 landscape 或纵向 portrait）

媒体查询中的逻辑运算符
                and：用于组合多个条件，所有条件都满足时才会应用样式。

                ,（逗号）：相当于 "或" 操作，任意一个条件满足时应用样式。

                not：取反，应用在不符合某个条件的设备上。

发现写了之后 @media 不生效

        and后面必须有空格

        @media查询的css写在前面会被后面的css所覆盖。（我是这个问题）

@media (max - width: [value]) {
    /* 当屏幕宽度小于等于[value]时应用的样式 */
}
@media (min - width: [value]) {
    /* 当屏幕宽度大于等于[value]时应用的样式 */
}



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

	.type {
		position: absolute;
		right: 13%;
		top: 75px;
	}
}

以上方法存在问题，希望有大佬在评论区留言！！！