【发布时间】：2017-03-09 11:04:58
【问题描述】：
试图为移动设备设置一个 img，我已经为平板电脑和普通桌面设备这样做了，但我发现很难编辑代码以使网站完全响应移动设备。当我将窗口最小化为右侧的移动大小时，我也有额外的空白空间。请指教，
/* Typography */
.header {font-family: "futura-pt", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1.0em; margin: 0; padding: 0; text-transform: uppercase; letter-spacing: 0.1em;}
p {font-family: "futura-pt", Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1.0em; margin: 0; padding: 0; text-transform: uppercase; letter-spacing: 0.1em;}
/* Sizes */
.large-5 {font-size: 5.0em;}
.large-4 {font-size: 4.0em;}
.large-3 {font-size: 3.0em;}
.large-25 {font-size: 2.5em;}
.large-2 {font-size: 1.5em;}
.large-15 {font-size: 1.3em;}
@media screen and (min-width: 768px) {
.large-5 {font-size: 5.0em;}
.large-4 {font-size: 4.0em;}
.large-3 {font-size: 3.0em;}
.large-25 {font-size: 2.5em;}
.large-2 {font-size: 2.0em;}
.large-15 {font-size: 1.5em;}
}
/* Colours */
.white {color: #fff;}
.black {color: #000;}
/* Spacing */
.padding-top {padding-top: 2em;}
.padding-top-double {padding-top: 2em;}
.padding-top-triple {padding-top: 1em;}
.padding-bottom {padding-bottom: 1em;}
/* Links */
a:link, a:visited, a:active {color: #fff; text-decoration: none;}
a:hover {color: #fff; text-decoration: underline;}
/* General */
html, section {height:100%;}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
background: #fff;
}
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* Structure */
.content{
width: 100%;
position: relative;
height: 100%;
margin: 0 auto;
border: 5px solid #fff;
background:url(http://jedesigns.uk/img/hd-sunset-river-HD-1200x1920.jpg) no-repeat;
background-size:cover;
background-position:center, bottom;
}
.content img {
max-width: 100%;
}
my-email::after {
content: attr(data-domain);
}
my-email::before {
content: attr(data-user) "\0040";
}
/* Media Queries */
@media screen and (max-width: 510px) {
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
float: left;
}
.content{
width: 100%;
position: relative;
height: 100%;
margin: 0 auto;
border: 5px solid #fff;
background-size:cover;
background-position:center, bottom;
}
.content img {
max-width: 75%;
}
@media screen and (max-width: 450px) {
body {
width: 100%;
height: 100%;
text-align: center;
}
.content{
width: 100%;
position: relative;
height: 100%;
background-size:cover;
background-position:center, bottom;
}
p { width: 75%;
text-align: center;
}
.content img {
max-width: 50%;
}
}<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Coming Soon</title>
<link href="css/Main.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section class="content">
<div style="width:500px; margin:0 auto; top:25%; position:relative">
<img src="img/logo.png">
<img src="img/line.png">
<p class="header large-2 white padding-top-triple">Coming This Fall 2015</p>
<p class="white padding-top"><span class="header">Email: </span><a href="mailto:Jethwa96@hotmail.co.uk"><my-email data-user="Jethwa" data-domain="jedesigns.uk"></my-email></a></p>
</div>
</section>
</body>
</html>【问题讨论】：
-
你能去掉这个内联样式吗：
<div style="width:500px; ...？ -
这改变了一切，尽管现在徽标已经炸毁，下面的图片与第一个 img 位于同一链接上
-
按照 area28 的建议尝试，但对未来的站点/项目来说是一个方便的提示。从移动媒体查询（例如无媒体查询）开始，然后在平板电脑和台式机上使用媒体查询要容易得多。这被称为移动优先设计并避免了这些类型的并发症^^。不是我知道的答案，只是一点建议。