【发布时间】：2019-12-06 14:28:27
【问题描述】：
您好，我首先开发了这个网站桌面，现在我正在尝试为移动用户添加媒体查询。在桌面上，我的画廊是一个弹性网格，但我试图将其设为单列，以便图片在移动设备上更大。感谢您的帮助
* {
-webkit-box-sizing:border-box;
margin:0;
padding:0;
}
body {
font-family:verdana;
font-size:14px;
font-weight:400;
height:100%;
background-color:#595959;
}
.header {
display:inline-block;
width:100%;
padding:15px 35px;
}
a {
color:#FFF;
text-decoration:none;
}
.menu {
display:flex;
flex-direction:row;
justify-content:flex-end;
}
.menu ul li {
display:inline-block;
line-height:24px;
margin:15px;
}
.menu ul li a {
text-decoration:none;
color:#fff;
font-size:24px;
padding:5px 10px;
}
.menu ul li a:hover {
color:red;
}
.sub-menu {
position:absolute;
display:none;
background-color:#202020;
}
.menu li:hover a+.sub-menu {
display:flex;
flex-direction:column;
}
.name {
display:block;
position:absolute;
bottom:10px;
left:10px;
width:320px;
border:1px solid #FFF;
}
.name h5 {
color:red;
font-size:33px;
text-align:left;
}
.name h1 {
color:#FFF;
font-size:120px;
line-height:100px;
}
.title {
color:#000;
font-size:24px;
background-color:#595959;
}
.foot {
position:fixed;
bottom:0;
right:0;
text-align:right;
font-size:10px;
}
.works {
height:100vh;
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-around;
left:500px;
}
.preview {
width:60%;
}
.preview2 {
width:75%;
}
.preview3 {
width:70%;
}
.page-title {
color:#FFF;
text-align:left;
margin-top:90px;
font-size:24px;
}
.gallery {
position:relative;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-around;
top:25%;
color:#FFF;
max-width:100%;
}
.gallery .image {
width:20%;
height:auto;
margin:2%;
}
.image img {
width:80%;
height:auto;
}
h6 {
font-family:helvetica, arial, sans-serif;
font-size:12px;
text-align:left;
}
.artist-statement {
position:relative;
float:left;
width:50%;
font-size:16px;
}
.selfie {
float:right;
position:relative;
left:780px;
}
@media screen (max-width: 480px) {
body{
width: 400px;
font-size: 110%;
display: flex;
flex-direction: column;
}
.menu {
float: none;
width: auto;
}
img {
width: 100%;
}
.gallery{
display: block;
flex-direction: column;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>John Blair Graphic Designer :: Digital</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="index.html">Home</a></li>
<li><a style="text-decoration:none" href="about.html">About</a></li>
<li><a class="drop" style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li><a href="digital.html">Digital</a></li>
<li><a href="physical.html">Physical</a></li>
<li><a href="photography.html">Photography</a></li>
</ul>
</li>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="page-title">
<h3>Graphic Design</h3>
</div>
<br><br>
<h3>illustration</h3>
<div class="gallery">
<div class="image">
<a target="_blank" href="images/illustration/Shelbs-01.png">
<img alt="illustration of beautiful woman" src="images/illustration/Shelbs-01.png"></a>
<h6>My Queen</h6>
</div>
<div class="image">
<a target="_blank" href="images/illustration/cheetahsketch.jpg">
<img alt="illustration of cheetah" src="images/illustration/cheetahsketch.jpg"></a>
<h6>Cheetah Sketch</h6>
</div>
<div class="image">
<a target="_blank" href="images/illustration/hardensketch.png">
<img alt="illustration of james harden" src="images/illustration/hardensketch.png"></a>
<h6>Fear The Beard</h6>
</div>
<div class="image">
<a target="_blank" href="images/illustration/lebronsketch.jpg">
<img alt="illustration of lebron james" src="images/illustration/lebronsketch.jpg"></a>
<h6>TACO TUUUEESDAY</h6>
</div>
<div class="image">
<a target="_blank" href="images/illustration/pigsketch.png">
<img alt="illustration of pig" src="images/illustration/pigsketch.png"></a>
<h6>1-800-CASH-PIG</h6>
</div>
<div class="image">
<a target="_blank" href="images/illustration/sludgesketch.jpg">
<img alt="illustration of sludge monster" src="images/illustration/sludgesketch.jpg"></a>
<h6>Sludge Monster</h6>
</div>
</div>
<br>
<h3 class="design">Design</h3>
<div class="gallery">
<div class="image">
<a target="_blank" href="images/illustration/spain.jpg">
<img alt="illustration travel poster of spain" src="images/illustration/spain.jpg"></a>
<h6>Spain Travel Poster</h6>
</div>
<div class="image">
<a target="_blank" href="images/desgin/oldspice.jpg">
<img alt="old-spice-advertisement" src="images/desgin/oldspice.jpg"></a>
<h6>Old Spice Advertisement</h6>
</div>
<div class="image">
<a target="_blank" href="images/desgin/burger.jpg">
<img alt="blair's burgers Advertisement" src="images/desgin/burger.jpg"></a>
<h6>Blair's Burgers</h6>
</div>
<div class="image">
<a target="_blank" href="images/desgin/book.jpg">
<img alt="book sleeve" src="images/desgin/book.jpg"></a>
<h6>Disoriented Book Cover</h6>
</div>
<div class="image">
<a target="_blank" href="images/desgin/BlairNewEventPoster-2.jpg">
<img alt="Ostrich festival poster" src="images/desgin/BlairNewEventPoster-2.jpg"></a>
<h6>2018 Ostrich Festival</h6>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>【问题讨论】：
标签： html css media-queries