Question

我已经创建了简单的构建html布局，但我无法使其响应。在400px及以下尺寸的屏幕上，我希望图像和容器的宽度为100％。

现在容器的固定宽度为400px。所以max-width属性不能像我预期的那样工作。

完整的HTML

<!DOCTYPE html >
<html>
<head>
<title>some title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<style>
    body {
        font-family: 'Arial', serif;
        width: 100%;
        height: 100%;
    }
    .container {
        padding: 10px;
        text-align: center;
        margin: 0 auto;     
        max-width: 400px;   
    }

    .container img {
        margin: 50px 0;
        display: inline-block;
        width: 100%;
        height: auto;
    }

    p { 
        font-size: 16px;
    }

    a {
        color: red;
    }

</style>
</head>

<body>

<div class="container">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg">
    <h1>some text</h1>
    <p>bla bla bla some text </p>
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg">
</div>

</body>
</html>

＆＃13;

body {
  font-family: 'Arial', serif;
  width: 100%;
  height: 100%;
}

.container {
  padding: 10px;
  text-align: center;
  margin: 0 auto;
  max-width: 400px;
}

.container img {
  margin: 50px 0;
  display: inline-block;
  width: 100%;
  height: auto;
}

p {
  font-size: 16px;
}

a {
  color: red;
}

＆＃13;

<div class="container">
  <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg">
  <h1>some text</h1>
  <p>bla bla bla some text </p>
  <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg">
</div>

＆＃13;

Answer 1

在头部

中添加

/* precautions to prevent any default margins or paddings set by the users browser*/
body,html{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
body{
    overflow:hidden;
}
*{
    box-sizing: border-box;
    overflow:none;
    font-family:Helvetica,Arial,Sans-serif;
}
*::selection {
    background: #FF6500;
}
*::-moz-selection {
    background: #FF6500;
}
nav{
    position:fixed;
    width:100%;
    top:0;
    height:70px;
    background-color:#222222;
    border-bottom:1px solid #FF6500;
-webkit-box-shadow: 0px 2px 100px -9px rgba(255,101,0,1);
-moz-box-shadow: 0px 2px 100px -9px rgba(255,101,0,1);
box-shadow: 0px 2px 100px -9px rgba(255,101,0,1);
}
nav ul{
    width:50%;
    float:right;
    text-align:left;
    padding:0;
    margin:0;
}
nav ul li{
    display:inline;
    list-style-type:none;
    padding-right:1em;
    text-align:center;
}
nav ul li>a{
    color:#FF6500;
    text-decoration: none;
    font-size:1.3em;
    font-family:Helvetica,Arial,Sans-serif;
    line-height:65px;
    text-shadow:0px 0px 5px rgba(220,220,220,0.5);
    transition:all 0.3s ease-out;
    border-bottom:0px;
}
nav ul:hover li a{
    opacity: 0.5;
}
nav ul li>a:hover{
    color:#f7f7f7;
    border-bottom:4px solid #FF6500;
    opacity:1;
}
#toggler{
    float:left;
    display:none;
}
#leftlogo{
    width:50%;
    height:70px;
    float:left;
    margin:0;
    padding:0;
}
#logo{
    float:right;
    height:70px;
    width:100px;
margin-right:50px;
    background-image:url('../images/finallogo.png');
    background-size: 100%;
    background-repeat: no-repeat;
}
#container{
    margin:0;
    padding:0;
    height:calc(100% - 100px);
    width:100%;
    background-color:#333333;
    padding:30px;
    margin-top:70px;
    margin-bottom:30px;
    overflow-y:auto;
}
main{
    width:80%;
    margin:auto;
    color:#d7d7d7;
    font-size:1.2em;
    letter-spacing: 0.5px;
    font-family:Helvetica,Arial,Sans-serif;
}
footer{
    margin:0;
    padding:0;
    position:fixed;
    bottom:0;
    width:100%;
    height:30px;
    background-color:#292929;
    border-top:1px solid #FF6500;
    line-height:30px;
    color:#f7f7f7;
}
#leftfooter{
    float:left;
    width:50%;
    padding-left:10%;
}
#rightfooter{
    float:right;
    width:50%;
    text-align:right;
    padding-right:10%;
}
#rightfooter>a{
    color:#FF6500;
    text-decoration: none;
}
.title{
    text-align:center;
    width:100%;
    font-size:1.7em;
    font-weight:bold;
    margin-bottom:30px;
    text-shadow:3px 3px 5px #222222;
}
.smtitle{
    width:100%;
    font-size:1.7em;
    font-weight:bold;
    text-shadow:3px 3px 5px #222222;
}
.section{
    width:100%;
    margin:0;
    padding:0;
    display:inline-block;
    margin-bottom:30px;
    transition:all ease-in 0.2s;
}
.section:hover{
    border-bottom:5px solid #FF6500;
    border-top:5px solid #FF6500;
    padding-top:10%;
    padding-bottom:10%;
}
.righttext{
    padding:0 15px;
    float:left;
    text-align:left;
    width:70%;
    text-shadow:3px 3px 5px #222222;
}
.rightimage{
    float:right;
    width:30%;
}
.leftimage{
    float:left;
    width:30%;
}
.lefttext{
    text-shadow:3px 3px 5px #222222;
    padding:0 15px;
    float:left;
    text-align:left;
    width:70%;
}

.section a{
    color:#788893;
    text-decoration:none;
}
.section a:hover{
    color:#f7f7f7;
}
.normal{
    width:35%;
    margin:auto;
}

dt{
    font-weight:bold;
    font-size:1.1em;
    text-shadow:2px 2px 4px #222222;
}

/* contact form */

#contact{
    width:60%;
    margin:auto;
}
#contact label{
    width:100%;
    display:inline-block;
}
#contact input, #contact textarea{
    width:100%;
    padding:15px 0;
    font-size:1.5em;
    background-color:#333333;
    border:none;
    color:#f7f7f7;
    border-bottom:5px solid #7a7a7a;
    transition:all ease-in 0.3s;
    outline:none;
    resize:none;
}

#contact input:focus, #contact textarea:focus{
    border-bottom:5px solid #f7f7f7;
}
.form-group{
    width:100%;
    margin-bottom:15px;
}
.button{
    width:20%;
    margin-right:40%;
    margin-left: 40%;
    padding:10px;
    border-radius:8px;
    background-color:#333333;
    border:1px solid #f7f7f7;
    color:#f7f7f7;
    font-weight:bold;
    outline:none;
    cursor:pointer;
    transition: all ease-in 0.2s;
}
.button:hover{
    border:none;
    border-bottom:5px solid #f7f7f7;
    border-radius:0;
    width:40%;
    margin-left:30%;
    margin-right:30%;
    background-color:#ff6500;
}
.button:active{
    border-bottom:1px solid #f7f7f7;
    margin-top : +4px;
}
#count{
    text-shadow:5px 5px 8px #222222;
    margin-bottom:10px;
}
.button[disabled]{
    display:none;
}

.template{
    width:25%;
    padding:10px;
    height:200px;
    display:inline-block;
    background:#292929;
    margin:10px;
    text-align:center;
}
.template img{
    width:100%;
    height:90%;
    margin:0;
}












/* custom scrollbar for webkit browsers only */

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 20px rgba(255,101,0,1); 
}

/* Mobile and tablets */

@media only screen and (max-width:1024px){
    nav{
        height:50px;
    }
    nav ul{
        margin-top:50px;
        height:calc(100% - 50px);
        width:100%;
        position:fixed;
        display:none;
        background-color:rgba(0,0,0,0.7);
    }
    nav ul:hover li a{
        opacity:0.7;
    }
    nav ul li:hover{
    color:#f7f7f7;
    border-bottom:4px solid #FF6500;
    opacity:1;
    }
    nav ul li:hover a{
    color:#f7f7f7;
    border-bottom:none;
    opacity:1;
    }
    nav ul li{
        width:100%;
        height:50px;
        line-height:50px;
        display:inline-block;
        text-align:center;
        background:rgba(22,22,22,0.7);
        border-bottom:1px solid #FF6500;
    }
    nav ul li a{
        line-height:50px;
    }
    #leftlogo{
        width:100%;
        height:50px;
    }
    #logo{
        float:left;
        height:50px;
        width:200px;
        background-image:url('../images/smlogo.png');
    }
    #toggler{
        display:inline;
        margin:0 2%;
        font-size:1.5em;
        line-height:50px;
        font-weight:bold;
        color:#FF6500;
        cursor:pointer;
        transition:all ease-in 0.2s;
    }
    #toggler:hover{
        text-shadow:0 0 1px #f7f7f7;
    }
    #container{
        margin-top:50px;
        height:calc(100% - 80px);
    }
    .section:hover{
        border:none;
        padding-top:0;
        padding-bottom:0;
    }
    .button{
        width:40%;
        margin-left:30%;
        margin-right:30%;
    }
    #contact{
        width:90%;
        margin-left:auto;
        margin-right:auto;
    }
    .template{
        width:45%;
    }
}
@media only screen and (max-width:768px){
    main{
        padding:5px;
        font-size:0.9em;
    }
    nav ul{
        overflow-y:auto;
    }
    nav{
        -webkit-box-shadow: 0px 2px 50px -9px rgba(255,101,0,1);
-moz-box-shadow: 0px 2px 50px -9px rgba(255,101,0,1);
box-shadow: 0px 2px 50px -9px rgba(255,101,0,1);
    }
    #logo{
        width:100px;
        height:25px;
        margin-top:12.5px;
        margin-bottom:12.5px;
    }
    .leftimage{
        display:none;
    }
    .rightimage{
        display:none;
    }
    .lefttext{
        width:100%;
    }
    .righttext{
        width:100%;
    }
    .section:hover{
        border:none;
        padding-top:0;
        padding-bottom:0;
    }
    .button{
        width:100%;
        margin:0;
    }
    #contact{
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }
    .button:hover{
        width:100%;
        margin:0;
    }
    .template{
        width:100%;
        height:auto;
    }
}

Answer 2

您的代码似乎工作得很好，如果您只是在窗口低于400px时左侧和右侧的装订线，您只需要将.container的填充设置为padding: 10px 0;，例如{ {3}}然后图像将完全出血。

如果你不想让它完全流血，那么你必须为文本应用额外的包装元素或样式

一页面布局没有响应

完整的HTML

2 个答案: