Html 桌面首次尝试使用媒体查询

您好，我首先开发了这个桌面网站，现在我正在尝试为移动用户添加一个媒体查询。在桌面上，我的图库是一个flex网格，但我正在尝试将它变成一个单独的列，以便在移动设备上显示更大的图片。我感谢你的帮助

*{
-webkit框大小：边框框；
保证金：0；
填充：0；
}
身体{
字体系列：verdana；
字体大小：14px；
字体大小：400；
身高：100%；
背景色：#5959；
}
.标题{
显示：内联块；
宽度：100%；
填充：15px 35px；
}
a{
颜色：#FFF；
文字装饰：无；
}
.菜单{
显示器：flex；
弯曲方向：行；
证明内容：柔性端；
}
李先生{
显示：内联块；
线高：24px；
利润率：15px；
}
.菜单ul li a{
文字装饰：无；
颜色：#fff；
字体大小：24px；
填充物：5px10px；
}
.菜单ul li a：悬停{
颜色：红色；
}
.子菜单{
位置：绝对位置；
显示：无；
背景色：#202020；
}
.menu li：将鼠标悬停在a+上。子菜单{
显示器：flex；
弯曲方向：立柱；
}
.姓名{
显示：块；
位置：绝对位置；
底部：10px；
左：10px；
宽度：320px；
边框：1px实心#FFF；
}
.名称h5{
颜色：红色；
字体大小：33px；
文本对齐：左对齐；
}
.名称h1{
颜色：#FFF；
字体大小：120px；
线高：100px；
}
.头衔{
颜色：#000；
字体大小：24px；
背景色：#5959；
}
.英尺{
位置：固定；
底部：0；
右：0；
文本对齐：右对齐；
字体大小：10px；
}
.工作{
高度：100vh；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
证明内容：周围的空间；
左：500px；
}
.预览{
宽度：60%；
}
.预览2{
宽度：75%；
}
.预览3{
宽度：70%；
}
.页面标题{
颜色：#FFF；
文本对齐：左对齐；
边缘顶部：90像素；
字体大小：24px；
}
.画廊{
位置：相对位置；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：周围的空间；
最高：25%；
颜色：#FFF；
最大宽度：100%；
}
.画廊.图片{
宽度：20%；
高度：自动；
利润率：2%；
}
.图像img{
宽度：80%；
高度：自动；
}
h6{
字体系列：helvetica、arial、无衬线字体；
字体大小：12px；
文本对齐：左对齐；
}
.艺术家声明{
位置：相对位置；
浮动：左；
宽度：50%；
字体大小：16px；
}
.自拍{
浮动：对；
位置：相对位置；
左：780px；
}
@媒体屏幕（最大宽度：480px）{
身体{
宽度：400px；
字体大小：110%；
显示器：flex；
弯曲方向：立柱；
}
.菜单{
浮动：无；
宽度：自动；
}
img{
宽度：100%；
}
.画廊{
显示：块；
弯曲方向：立柱；
}
}

约翰·布莱尔平面设计师：数码












平面设计



插图
我的女王
猎豹素描
怕胡子
塔可星期四
1-800-现金清管器
污泥怪兽


设计
西班牙旅游海报
旧香料广告
布莱尔汉堡
迷失方向的书皮
2018鸵鸟节

更高级别的选择器应用于桌面css中的选择器，请在查询中使用相同的选择器：

.gallery .image {
    width: 100%;
}