Question

我想将以下div代码转换为响应代码：

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

有什么建议吗？

Answer 1

您可以将HTML更改为以下内容，只使用下面css文件内容中包含div的类：

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

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

您可以创建一个css文件并将其链接到html <head></head>标记中。当浏览器窗口低于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%;
}

}

Answer 2

如果您想要响应式设计，最好将百分比用于水平测量的所有内容。这包括宽度，左右填充和边距，并使用em作为font-size。您正在使用百分比，这很好，现在您可以更进一步，如果您愿意，可以在填充中开始使用百分比。另外，在字体中使用em。

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

接着是媒体查询。媒体查询将帮助您的网页以特定宽度做出不同的响应。这很重要，因为由于您使用的是百分比，因此会出现一个宽度，使您的页面看起来很时髦。

假设页面开始在900px处看起来很奇怪。您的媒体查询可能看起来像这样。

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

所以现在在900px及以下，您的页面将通过允许每个div占据更多屏幕来响应，从而在较小的屏幕中看起来更好。

尝试使用宽度百分比和媒体查询，你会发现它实际上非常简单。玩得开心。

转换为响应式设计

2 个答案: