Question

我有一些html / css在screenfly上运行良好但在实际手机/平板电脑上行为不端。

看起来在手机上，瓷砖的最小宽度并未得到尊重。有什么我可以采取不同的方式来达到同样的效果吗？

HTML：

<div class="homepageTiles">
            <!-- Row 1 -->
            <div class="tile">
                <img src="/images/HomepageTiles/EngineTile.png" class="tileImage">

                <div class="caption" style="top: -255px;">
                    <div class="captionLinks">
                        <a href="/engines/onHighway.aspx">ON HIGHWAY</a>
                        <a href="/engines/offHighway.aspx">OFF HIGHWAY</a>
                    </div>
                </div>
            </div>
            <div class="tile">
                <img src="/images/HomepageTiles/TransmissionTile.png" class="tileImage">

                <div class="caption" style="top: -255px;">
                    <div class="captionLinks">
                        <a href="/transmissions/onHighway.aspx">ON HIGHWAY</a>
                        <a href="/transmissions/offHighway.aspx">OFF HIGHWAY</a>
                        <a href="/transmissions/remanufactured.aspx">REMANUFACTURED</a>
                    </div>
                </div>
            </div>
            <div class="tile">
                <img src="/images/HomepageTiles/GeneratorsTile.png" class="tileImage">

                <div class="caption" style="top: -255px;">
                    <div class="captionLinks">
                        <a href="/generators/ingersollRand.aspx">DOOSAN</a>
                        <a href="/generators/mtuOnSiteEnergy.aspx">MTU ONSITE ENERGY</a>
                        <a href="/generators/packagedGensets.aspx">PACKAGED GENSETS</a>
                        <a href="/generators/preventitiveMaintenance.aspx">PM PROGRAMS</a>
                        <a href="/generators/switchGearAts.aspx">SWITCH GEAR ATS</a>
                    </div>
                </div>
            </div>
            <div class="tile">
                <a href="/companyInfo/careers.aspx">
                    <img src="/images/HomepageTiles/CareersTile.png" class="tileImage">
                </a>
            </div>
        </div>

CSS：

.homepageTiles .tile {
margin: .3%;
float: left;
width: 24.4%;
min-width: 225px;
position: relative;
overflow: hidden;
}

.homepageTiles .tileImage {
width: 100%;
}

.homepageTiles .caption {
float: left;
position: absolute;
height: 225px;
width: 100%;
background: url(/images/HomepageTiles/TileBackground.png);
left: 0;
top: -225px;
text-align: center;
}

.homepageTiles .caption .captionLinks {
margin-left: 25px;
margin-right: 25px;
margin-top: 75px;
padding-bottom: 5px;
border-top: 1px solid #959799;
border-bottom: 1px solid #959799;
}

.homepageTiles .caption .captionLinks a {
display: block;
margin-top: 5px;
font-size: 17px;
color: #ffffff;
}

Answer 1

您应该添加元标记，例如：

 <meta name="viewport" content="width=device-width, user-scalable=yes" />

如果不希望使用JS解决方案，您可以使用CSS媒体查询为每种类型的设备使用CSS，例如：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

将以下ID添加到您的HTML

<div id="size" class="tile">
<img id="tile1"  src="http://www.cpower.com/images/HomepageTiles/EngineTile.png" class="tileImage">
<img id="tile2" src="http://www.cpower.com/images/HomepageTiles/TransmissionTile.png" class="tileImage">
<img id="tile3" src="http://www.cpower.com/images/HomepageTiles/GeneratorsTile.png" class="tileImage">
<img id="tile4" src="http://www.cpower.com/images/HomepageTiles/CareersTile.png" class="tileImage">

然后在</body>

之前将此JS放在页面底部

<script type="text/javascript">
//<![CDATA[
var tile = new Array;
tile[0] = document.getElementById('size');
tile[1] = document.getElementById('tile1');
tile[2] = document.getElementById('tile2');
tile[3] = document.getElementById('tile3');
tile[4] = document.getElementById('tile4');
function resize(){
  var w = tile[0].offsetWidth ;
  if (w < 255){w=225;}
  tile[1].style.width= w+'px';
  tile[1].style.height= w+'px';
  tile[2].style.width= w+'px';
  tile[2].style.height= w+'px';
  tile[3].style.width= w+'px';
  tile[3].style.height= w+'px';
  tile[4].style.width= w+'px';
  tile[4].style.height= w+'px';
}
window.onload = resize;
window.onresize = resize;
//]]>
</script></body></html>

我在resize函数的全局范围内定义了vars tile。这样设置vars只进行一次，而不是每次调整屏幕大小或旋转移动屏幕。可以使用for循环来减小代码的大小。由于循环开销，这会运行得慢一点，并且不会减少实际执行的机器代码大小，这也是由于循环开销。

参考：

Intel Architectures Optimization Reference

用户/来源编码规则1第15-6页，
用户/来源编码规则1第3-9页，
用户/来源编码规则2,3,4,5第3-39页，
用户/来源编码规则18第8-13页，
用户/来源编码规则31第8-22页
用户/来源编码规则10,11页3-59

移动响应式瓷砖

1 个答案: