Question

您好，我试图弄清楚这个响应式网页设计，我理解概念和语法，问题是我不知道如何去解决这个问题，例如找出div的维度随着屏幕缩小。

这是我尝试做的示例代码

HTML

      <html >
<head> 
<meta name="viewport" content="width=device-width; initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="teststyles.css"> 

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<link href="media-queries.css" rel="stylesheet" type="text/css">

</head>

<body>
<div class = "container">   


    <div class = "Pictureholder">

        <p> image here </p>
    </div>


    <div class = "Contentholder">

    <p> Model #: Samsung Appliance NE595R1ABSR    Compare
  Samsung Appliance NE595R1ABSR 30" Freestanding Electric Range With 5 Cooktop   Elements, 5.9 Cu. Ft., Self-Cleaning, Convection, Warming Drawer, 2 Chrome Oven Racks, LED,     In Stainless Steel </p>

     ----------------------------------------------------------------------------------  ---------------------

     <p> How Will My Product(s) Be Delivered? When purchasing a large appliance from   AppliancesConnection, a representative will contact you 48 hours prior to arriving to your     location to schedule a delivery date and a 4 hour time window. Upon delivery, your product   will be unloaded and ready for you to open and inspect. If you have chosen White Glove   service, the item will be placed in your room of choice and the debris will be removed. 






     </p>


    </div>


    <div class = "priceholder">

    <p> Was this much money </p>
    <p> this is how much it cost now </p> <Br><Br><Br><Br>
    BUY NOW

    </div>


   </div>

  </body>

 </html>

CSS

    .container{width: 990px; margin:0 auto 0 auto; position:realtive;}

 .Pictureholder{ position: absolute; left: 500px; width: 300px; margin:250px 900px 0    0;display: block;}

.Contentholder{ position: absolute; right: 0px;width: 300px;background-color: #b0e0e6;margin:250px 900px 0 0;display: block;}

.priceholder{position: absolute; right: 0px;width: 300px;background-color: #b0e0e6;margin:250px 550PX 0 0;display: block;}



    @media screen and (max-width: 980px) {



   .Picturecontainer{

    width:30%;

    }

    .Contentcontainer{

     width:30%;

 }

 .pricecontainer{

    width:30%;

  }

}

 @media screen and (max-width: 650px) {

    .Picutrecontainer{

     width:auto;
     margin:0;

    }


   .Contentcontainer{

    width:auto;
    margin:0;

  }

  .pricecontainer{

    width:100%;
    margin:0;

  }

}

 @media screen and (max-width: 480px) {

html {
    -webkit-text-size-adjust: none;
 }



}

任何提示我应该怎么做？

Answer 1

哦，所以我意识到我必须将我的div分成三个偶数部分，而css将负责其余部分。

所以它是宽度：990px，所以我只是简单地将其他三个div的宽度变为330px并取出一些冗余代码

     .container{width: 990px; margin: 0 auto;}

 .Pictureholder{  float:left; width: 330px;display: block; }

 .Contentholder{  float:left;width: 330px;background-color: #b0e0e6;display: block;}

 .priceholder{ float:left;width: 330px;background-color: #b0e0e6;display: block;}

css的其余部分应该是好的

试图找出响应式网页设计

1 个答案: