Question

尝试将img用于移动设备，我已经为平板电脑和普通桌面设备做了这样的工作，但我发现很难编辑代码以使网站对移动设备完全响应。当我将窗口缩小到右侧的移动尺寸时，我还有额外的空白区域。请指教，

＆＃13;

/* 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%;
    
    

}

}

＆＃13;

<!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>

＆＃13;

Answer 1

我找到了答案，我必须在该部分中添加一个div。

<section class="content">

    <div style="margin:0 auto;
                top:25%;
                position:relative">

       <img src="img/logo.png">
       <div class="line"><img src="img/line.png"></div>
       <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>

我如何以移动设备为中心？

1 个答案: