当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Convert to responsive design

问题描述:

I would like to convert the following div code to responsive code:

<div style="padding: 20pt 10pt 0pt 10pt; width: 45%; float: left; font-size: 16px; position: relative; top: 20px;">

content1

</div>

<div style="padding: 20pt 10pt 0pt 10pt; width: 45%; float: right; font-size: 16px; position: relative; top: 20px; ">

content2

</div>

Any suggestion?

网友答案:

You could change your HTML to the following and just use classes with your divs from the css file content below:

<div class="div-one">
    content1
</div>

<div class="div-two">
    content2
</div>

You could create a css file and link it within the html <head></head> tags. Also anything within the media queries tags will come in to play when the browser window is below the width of 750px:

.div-one{
    padding: 20pt 10pt 0pt 10pt; 
    width: 960px; 
    float: left; 
    font-size: 16px; 
    position: relative; 
    top: 20px;
}

.div-two{
    padding: 20pt 10pt 0pt 10pt; 
    width: 960px; 
    float: left; 
    font-size: 16px; 
    position: relative; 
    top: 20px;
}

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

.div-one{
    width:90%;
}

.div-two{
    width:90%;
}

}
网友答案:

If you want responsive design, it's best to use percentages for everything that is measured horizontally. That includes width, left and right padding and margin, and use em for font-size. You're using percentages, which is good, now you can take it a step further and start using percentages in the padding if you want to. Also, use em in the font.

div{
width:45%;
float:left;
font-size:1em;
padding:20pt 1% 0 1%;
}

And then come the media queries. Media queries will help your page respond differently at certain widths. This is important because since you are using percentages, there will come a width that will make your page look funky.

Let's say the page starts to look weird at 900px. Your media query can look something like this.

@media screen and (max-width:900px){
div{
float:none;
position:static;
width:80%;
}
}//close media query

So now at 900px and below, your page will respond by allowing each div to take up more of the screen thus looking better in smaller screens.

Try playing around with width percentages and media queries and you'll see that it's actually pretty easy. Have fun.

分享给朋友:
您可能感兴趣的文章:
随机阅读: