Repsonsive网页

时间：2017-04-26 15:25:17

标签： html html5 css3 dom

我一直在设计一个网页，我希望这个网页会变成一个我将来会用到的网站。

我的CSS有一种情况，如果用户在浏览器上增加缩放级别，网页就会变形。在这个阶段我不是一个非常优秀的网页设计师，我仍然在我缺乏的领域学习。

你们中的一些天才能指出我如何改进我的CSS的正确方向。以下是我的源代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Shop1</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../style/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="header-content">
    <div id="header-brand">
      <Label id="header-content-heading">Meta-eShop</Label>
    </div>
    <div id="header-links">
      <input type="text" id="search-product-text" placeholder="Search.." />
      <a href="#" title="Login/Register" id="header-login">Login/Register</a><a id="header-cart" href="#" title="basket">Basket</a>
    </div>
  </div>
  <div id="side-nav-bar">

  </div>
  <div id="main-body-container">
    <div id="main-body-section">
      <div id="main-body-content">
        <p id="intro">Quisque sed risus consequat, mattis libero in, hendrerit ligula. Nam ut hendrerit augue. Phasellus justo massa, sollicitudin a feugiat vel, feugiat in enim. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
          posuere cubilia Curae; Duis non ligula magna. Proin commodo, felis ac viverra condimentum, tortor metus aliquet lacus, sed maximus lacus urna scelerisque urna. Nulla condimentum enim ac viverra fermentum. Vestibulum accumsan velit molestie arcu
          tincidunt, porttitor volutpat leo ornare. Duis faucibus justo quis est congue ultrices. Nam metus nulla, accumsan in vulputate ut, viverra eget lorem.</p>
        <div class="row">
          <div class="col-3">
            <img src="../img/200x200.png"><br> Quisque sed risus consequat, mattis libero in, hendrerit ligula. Nam ut hendrerit augue. Phasellus justo massa, sollicitudin a feugiat vel, feugiat in enim. Aliquam erat volutpat. Vestibulum ante.
          </div>
          <div class="col-3">
            <img src="../img/200x200.png"><br> Quisque sed risus consequat, mattis libero in, hendrerit ligula. Nam ut hendrerit augue. Phasellus justo massa, sollicitudin a feugiat vel.
          </div>
          <div class="col-3">
            <img src="../img/200x200.png"><br> Quisque sed risus consequat, mattis libero in, hendrerit ligula. Nam ut hendrerit augue. Phasellus justo massa.
          </div>
        </div>
        <div class="row">
          <div class="col-3">
            <img src="../img/200x200.png"><br> Quisque sed risus consequat, mattis libero in, hendrerit ligula. Nam ut hendrerit augue. Phasellus justo massa, sollicitudin a feugiat vel, feugiat in enim. Aliquam erat volutpat. Vestibulum ante.
          </div>
          <div class="col-3">
            <img src="../img/200x200.png"><br> Quisque sed risus consequat, mattis libero in, hendrerit ligula. Nam ut hendrerit augue. Phasellus justo massa, sollicitudin a feugiat vel.
          </div>
          <div class="col-3">
            <img src="../img/200x200.png"><br> Quisque sed risus consequat, mattis libero in, hendrerit ligula. Nam ut hendrerit augue. Phasellus justo massa.
          </div>
        </div>
        <div class="row">
          <div class="col-4">
            <img src="../img/200x200.png"><br> Quisque sed risus consequat, mattis libero in, hendrerit ligula. Nam ut hendrerit augue. Phasellus justo massa.
          </div>
          <div class="col-4">
            <img src="../img/200x200.png"><br> Quisque sed risus consequat, mattis libero in, hendrerit ligula. Nam ut hendrerit augue. Phasellus justo massa.
          </div>
          <div class="col-4">
            <img src="../img/200x200.png"><br> Quisque sed risus consequat, mattis libero in, hendrerit ligula. Nam ut hendrerit augue. Phasellus justo massa.
          </div>
          <div class="col-4">
            <img src="../img/200x200.png"><br> Quisque sed risus consequat, mattis libero in, hendrerit ligula. Nam ut hendrerit augue. Phasellus justo massa.
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

html{
height:100%;
width:auto;
font-family:"arial","helvetica",sans-serif;
} 
body{
width:100%;
height:100%;
margin:0px;
} 
:root{ 
--bg-color: rgba(246,246,246,.8); 
--bg-color-side: rgba(246,246,246,1); 
--font-upper: "Brush Script Std", "Brush Script MT","Cursive";
--font-color: rgba(100,100,100,1.0);
--hover: 2px 2px 5px grey; 
} /*header content*/ 
#header-content{
width:100%;
height: 15%;
background-color: var(--bg-color);
display:inline-block;
border-bottom: var(--font-color) solid 3px;
position:fixed;
} 
#header-brand{
float:left;
margin:20px;
margin-left: 150px; 
font-size:3em;
border:var(--font-color) dashed 2px;
padding:5px;
font-family: var(--font-upper);
border-radius:5px;
} 
#header-links{
float:right;
margin-right:5%;
margin-top: 45px;
} 
#header-links #search-product-text{
margin-right:5px;
padding-left:10px;
margin-right:50px;
font-size:1em;
border-radius:10px;
} 
#header-links #header-login, #header-links #header-cart{
font-size: 1em;
padding-right:20px;
text-decoration: none;
} 
#header-links #header-login, #header-links #header-cart, #header-links #search-product-text, #header-links #search-product-submit{
color:var(--font-color);
} 
#header-login{
border-radius: 10px;
} 
#header-login:hover{
text-shadow: var(--hover);
} 
#header-cart:hover{
text-shadow: var(--hover);
} 
/*main container content*/ 
#side-nav-bar{
float:left;
width:10%;
height: 100%;
background-color:var(--bg-color-side);
overflow:visible;
position: absolute;
margin-top:7.55%;
position:fixed;
border-right: solid var(--font-color) 3px;
} 
#main-body-container{
height:80%;
padding-top: 8%;
} 
#main-body-section{
width:65%;
height: 99%;
margin-left:20%;
}
#main-body-content{
width:100%; 
height:100%;
} 
/*----------------------------------------------------*/ 
/*row style*/ 
.row {
height:auto;
width:100%;
display:flex;
align-content: center;
} 
.col-3{
width: 32.3%;
padding:1%;
height:auto;
float:left;
} 
.col-3 img{
width: auto;
margin-left: 20%;
}
.col-4{
width:25%;
padding:1%;
height:auto;
float:left;
} 
.col-4 img{
width: auto;
margin-left: 10%;
}

2 个答案:

答案 0 :(得分：1)

第一步：您应该使图像响应，以便它们不会破坏小屏幕上的列。在CSS文件中，添加：

img {
    height: auto;
    max-width: 100%;
}

但还有一些问题。小屏幕上的列太窄了。宽屏幕上的四列应仅转向拖曳列，甚至小型移动显示器上的一列。不幸的是，我还没有使用flexbox模型。在没有flexbox的布局中，您可以在CSS中使用媒体查询，如下所示：

/*----------------------------------------------------*/ 
/*row style*/ 

.row {
    height: auto;
    width: 100%;
    display: flex;
    align-content: center;
} 
.col-3 {
    width: 100%;
    padding: 1%;
    height: auto;
    float: left;
} 
.col-4 {
    width: 100%;
    padding: 1%;
    height: auto;
    float: left;
} 
.col-3 p.image,
.col-4 p.image {
    text-align: center;
}

@media only screen and (min-width: 640px) and (max-width: 959px) {
    .col-3 {
        width: 32.3%;
        padding: 1%;
        height: auto;
        float: left;
    } 
    .col-4 {
        width: 50%;
        padding: 1%;
        height: auto;
        float: left;
    } 
}

@media only screen and (min-width: 960px) {
    .col-3 {
        width: 32.3%;
        padding: 1%;
        height: auto;
        float: left;
    } 
    .col-4 {
        width: 25%;
        padding: 1%;
        height: auto;
        float: left;
    } 
}

这不适用于您的代码，但您可能会找到解决方案。无论如何，非常旧的浏览器不支持flexbox（see caniuse.com），至少对于仍在Windows XP用户使用的Internet Explorer 9，您应该构建一个解决方法。

最后一个问题是，内容在小屏幕尺寸上不完全可见，因为它在标题部分下滑动。我目前没有解决方案。我应该首先自己学习一下flexbox的东西（我还没有找到时间）。

尽管如此，我希望我能帮助至少一点。也许这里的一些天才可以帮助你更好。

答案 1 :(得分：0)

在你学习的同时，你可以看一下Bootstrap（http://getbootstrap.com/）

Bootstrap是一个默认响应的Web框架 - 你在HTML中使用它的标签，当你重新调整页面大小等时它会使它响应。有些人可能不喜欢使用Bootstrap，因为它做了很多对你来说很辛苦，所以如果你是这些人中的一员，你可以在JavaScript（https://www.w3schools.com/css/css_rwd_intro.asp）中查看如何做到这一点。

相关问题
最新问题