堆栈内存溢出
  繁体   English   中英

使具有绝对宽度的组件具有响应性

[英]Making a component with absolute widths to be responsive

 原文  2021-07-30 06:31:58  3   2    html/ css/ twitter-bootstrap

问题描述

我有一个在 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 */

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

在 Adob​​e XD 中，组件的尺寸为

width: 729px;
height: 172px;

有没有一种方法可以使这个组件占据任何引导列类的整个宽度？

2 个解决方案

解决方案1
 0  2021-07-30 06:37:30

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

只需将其替换为col-sm-12或col-12 。 它将在所有类型的屏幕尺寸中占据整个宽度。

解决方案2
 0  2021-07-30 08:40:32

我发现缩放有效

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 的插件运行非常好并生成响应式代码。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 响应宽度 使绝对菜单响应大小变化 具有最大宽度的移动响应表 使响应无响应 将绝对分为响应式img 响应和绝对定位的麻烦 CSS：居中元素具有内联绝对宽度/高度 CSS响应绝对定位 响应式绝对图像缩放 绝对正方形的响应网格
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM