gpt4 book ai didi

css - 转换为响应式设计

转载 作者:行者123 更新时间:2023-11-28 10:40:07 25 4
gpt4 key购买 nike

我想将以下 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>

有什么建议吗?

最佳答案

您可以将您的 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%;
}

}

关于css - 转换为响应式设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23174355/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com