让一个具有绝对宽度的组件响应

Question

我有一个组件设计在adobe xd https://pensive-bhaskara-03863d.netlify.app/并通过xd导出到html/css插件。问题是导出的宽度都是绝对的，而且它们很多。

html

<div id="content-container" >
<div id="page_airline_results_ek1"  >
<div id="_bg__airline_results_ek2"  ></div>
<div id="rectangle_1"  ></div>
<img src="https://logan.site/skins/rectangle_2.png" id="rectangle_2" />
<img src="https://logan.site/skins/rectangle_3.png" id="rectangle_3" />
<div id="multiple__airlines" >
Multiple <br/>Airlines
</div>
<div id="ethiopian_airlines" >
Ethiopian<br/>Airlines
</div>
<div id="operated_by_ukraine_international_airlines" >
Operated by Ukraine International Airlines
</div>
<div id="_4_25_am" >
4:25 am
</div>
<div id="nbo" >
NBO
</div>
<div id="_6_00pm" >
6:00pm
</div>
<div id="kbp" >
KBP
</div>
<div id="_11h_07m" >
11h 07m
</div>
<div id="_21h_23m" >
21h 23m
</div>
<div id="_4_25_am_ek1" >
4:25 am
</div>
<div id="nbo_ek1" >
NBO
</div>
<div id="_6_00pm_ek1" >
6:00pm
</div>
<div id="kbp_ek1" >
KBP
</div>
<div id="group_6"  >
<img src="https://logan.site/skins/line_1.png" id="line_1" />
<img src="https://logan.site/skins/line_2.png" id="line_2" />
<div id="group_4"  >
<div id="rectangle_4"  ></div>
</div>
</div>
<img src="https://logan.site/skins/line_3.png" id="line_3" />
<img src="https://logan.site/skins/icon_awesome_share_alt.png" id="icon_awesome_share_alt" />
<div id="rectangle_5"  ></div>
<div id="view_deal" >
View Deal
</div>
<div id="__1_600" >
$1,600
</div>
<div id="group_7"  >
<img src="https://logan.site/skins/line_1_ek1.png" id="line_1_ek1" />
<img src="https://logan.site/skins/line_2_ek1.png" id="line_2_ek1" />
<div id="group_4_ek1"  >
<div id="rectangle_4_ek1"  ></div>
</div>
</div>
</div>
</div>

和css

/*
@name airline_results
*/
/* Only edit this if you know what you are doing! */
body { margin: 0px; padding: 0px; font-family:"Arial"; overflow-x:hidden; }
/* Only edit this if you know what you are doing! */
img { position: absolute; display: block; margin: 0px; border: none; padding: 0px; }
/* Only edit this if you know what you are doing! */
div { position: absolute; }
#content-container { display: table; position: relative;  margin-left: auto; margin-right: auto;  }
#content-container > div{ position: relative; top:inherit; }
#page_airline_results_ek1 {
top: 0px;
left: 0px;
width: 729px;
height: 172px;
}
#_bg__airline_results_ek2 {
top: 0px;
left: 0px;
width: 729px;
height: 172px;
background:rgba(255,255,255,255);
}

#rectangle_1 {
top: 0px;
left: 0px;
width: 731px;
height: 173px;
-ms-border-radius: 1px;
-o-border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
border: 1px solid #707070;
background:rgba(255,255,255,255);
}

#rectangle_2 {
top: 11px;
left: 13px;
width: 64px;
height: 36px;
}

#rectangle_3 {
top: 80px;
left: 13px;
width: 64px;
height: 36px;
}

#multiple__airlines {
top: 47px;
left: 13px;
width: 52px;
height: 37.5px;
overflow: hidden;
font-family: Segoe UI;
font-size: 11px;
font-weight: bold;
text-align: left;
color:#707070;
}

#ethiopian_airlines {
top: 117px;
left: 13px;
width: 54px;
height: 37.5px;
overflow: hidden;
font-family: Segoe UI;
font-size: 11px;
font-weight: bold;
text-align: left;
color:#707070;
}

#operated_by_ukraine_international_airlines {
top: 147px;
left: 13px;
width: 228px;
height: 24px;
overflow: hidden;
font-family: Segoe UI;
font-size: 12px;
text-align: left;
color:#707070;
}

#_4_25_am {
top: 25px;
left: 117px;
width: 46px;
height: 22.5px;
overflow: hidden;
font-family: Segoe UI;
font-size: 11px;
font-weight: bold;
text-align: left;
color:#0a0707;
}

#nbo {
top: 40px;
left: 126px;
width: 29px;
height: 22.5px;
overflow: hidden;
font-family: Segoe UI;
font-size: 11px;
font-weight: bold;
text-align: left;
color:#707070;
}

#_6_00pm {
top: 25px;
left: 263px;
width: 44px;
height: 22.5px;
overflow: hidden;
font-family: Segoe UI;
font-size: 11px;
font-weight: bold;
text-align: left;
color:#0a0707;
}

#kbp {
top: 40px;
left: 268px;
width: 26px;
height: 22.5px;
overflow: hidden;
font-family: Segoe UI;
font-size: 11px;
font-weight: bold;
text-align: left;
color:#707070;
}

#_11h_07m {
top: 33px;
left: 346px;
width: 50px;
height: 22.5px;
overflow: hidden;
font-family: Segoe UI;
font-size: 11px;
font-weight: bold;
text-align: left;
color:#0a0a0a;
}

#_21h_23m {
top: 77px;
left: 346px;
width: 50px;
height: 22.5px;
overflow: hidden;
font-family: Segoe UI;
font-size: 11px;
font-weight: bold;
text-align: left;
color:#0e0c0c;
}

#_4_25_am_ek1 {
top: 70px;
left: 117px;
width: 46px;
height: 22.5px;
overflow: hidden;
font-family: Segoe UI;
font-size: 11px;
font-weight: bold;
text-align: left;
color:#0a0707;
}

#nbo_ek1 {
top: 85px;
left: 126px;
width: 29px;
height: 22.5px;
overflow: hidden;
font-family: Segoe UI;
font-size: 11px;
font-weight: bold;
text-align: left;
color:#707070;
}

#_6_00pm_ek1 {
top: 70px;
left: 263px;
width: 44px;
height: 22.5px;
overflow: hidden;
font-family: Segoe UI;
font-size: 11px;
font-weight: bold;
text-align: left;
color:#0a0707;
}

#kbp_ek1 {
top: 85px;
left: 268px;
width: 26px;
height: 22.5px;
overflow: hidden;
font-family: Segoe UI;
font-size: 11px;
font-weight: bold;
text-align: left;
color:#707070;
}
#group_6 {
top: 80px;
left: 164px;
width: 93px;
height: 9px;
}
#line_1 {
top: 5px;
left: 0px;
width: 40px;
height: 1px;
}

#line_2 {
top: 5px;
left: 53px;
width: 40px;
height: 1px;
}
#group_4 {
top: 0px;
left: 41px;
width: 12px;
height: 9px;
}
#rectangle_4 {
top: 0px;
left: 0px;
width: 14px;
height: 11px;
border: 1px solid #707070;
background:rgba(255,255,255,255);
}

#line_3 {
top: 0px;
left: 544px;
width: 1.9999847412109px;
height: 171.005859375px;
}

#icon_awesome_share_alt {
top: 17px;
left: 557px;
width: 21.849975585938px;
height: 27.200012207031px;
}

#rectangle_5 {
top: 128px;
left: 557px;
width: 158px;
height: 39px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #707070;
background:rgba(52,97,189,255);
}

#view_deal {
top: 134px;
left: 596px;
width: 84px;
height: 33.5px;
overflow: hidden;
font-family: Segoe UI;
font-size: 17px;
font-weight: bold;
text-align: left;
color:#f9f9f9;
}

#__1_600 {
top: 59px;
left: 629px;
width: 84px;
height: 50.5px;
overflow: hidden;
font-family: Segoe UI;
font-size: 25px;
font-weight: bold;
text-align: left;
color:#090707;
}
#group_7 {
top: 31px;
left: 164px;
width: 93px;
height: 9px;
}
#line_1_ek1 {
top: 5px;
left: 0px;
width: 40px;
height: 1px;
}

#line_2_ek1 {
top: 5px;
left: 53px;
width: 40px;
height: 1px;
}
#group_4_ek1 {
top: 0px;
left: 41px;
width: 12px;
height: 9px;
}
#rectangle_4_ek1 {
top: 0px;
left: 0px;
width: 14px;
height: 11px;
border: 1px solid #707070;
background:rgba(255,255,255,255);
}

/* Add your custom CSS here */

我正在使用bootstrap，所以我希望我的组件占据其所在列的整个宽度。例如，在col-md-12中，我希望组件占用整个宽度。

在adobexd中，组件的尺寸为

width: 729px;
height: 172px;

是否有一种方法，我可以用它来使这个组件占用任何引导列类的整个宽度?

Answer 1

For instance in col-md-12 i want the component to occupy the entire width.

用col-sm-12或col-12代替即可。它将占据所有屏幕尺寸的整个宽度。

Answer 2

我发现缩放工作

transform: scale(0.5);

我是这样使用的

#guid_42a7dc60_7a7f_432e_9a28_e6f5032ee5cf {
position: absolute;
width: 2321px;
height: 443px;
background-color: #fff;
transform: scale(0.5) !important;
}

我还发现XD的插件工作得很好，并产生响应代码。