Question

我目前正在研究Android移动应用程序，我遇到了android mobile的图像渲染问题，它的尺寸较小。 Nexus，三星等手机上的图像看起来很整洁，但是屏幕很宽，但图像重叠在较小的屏幕手机上。我正在使用离子来构建我的代码和也包括引导程序。

我在样式部分中包含了以下代码：

@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

正文中的以下代码：

<div class="col-xs-12 col-md-12 col-sm-12" >
<div id="journey" class="col-xs-2">
                            <a href=" "> <img src="./images/launch 48.png" class="img_responsive" style="width:60px;height:70px;padding:5px;position: relative;left:1%;" cursor="pointer" onclick="" /></a>
</div>
<div id="conveyance" class="col-xs-2">
                            <a href="./4s.html "><img src="./images/launch 48.png" class="img_responsive"  style="width:60px;height:70px;padding:5px;" cursor="pointer" /></a>
</div>
<div id="per-diem" class="col-xs-2" >
                            <a href=" "> <img src="./images/launch 48.png" class="img_responsive"  style="width:60px;height:70px;padding:5px;"cursor="pointer" onclick="" /></a>
</div>
            <div id="lodging" class="col-xs-2" >
                            <a href=" "><img src="./images/launch 48.png" class="img_responsive" style="width:60px;height:70px; padding:5px;"cursor="pointer" onclick="" /></a>
</div>
            <div id="misc_1" class="col-xs-2" >
                            <a href=" "><img src="./images/launch 48.png" class="img_responsive" style="width:60px;height:70px; padding:5px;" cursor="pointer" onclick="" /></a>
</div>
            <div id="end_journey" class="col-xs-2">
                            <a href=" "> <img src="./images/launch 48.png" class="img_responsive" style="width:60px;height:70px;padding:5px;"cursor="pointer" onclick="" /></a>
</div>

移动应用中的图像渲染

0 个答案: