前面回答过了,图标如果是固定宽度,肯定要根据不同尺寸终端调整.核心思想是在不同尺寸手机上调整长度。可以用rem作为单位。
手机端布局肯定是响应式的,横竖都能看。但是局部需要调整,可以使用媒体查询方式来微调。
在js中可以这么写:
function(e){
//responsitive offset setting
var offeset_x=0,offset_y=0;
// For browsers that support matchMedium api such as IE 9 and webkit
var styleMedia = (window.styleMedia || window.media);
if(styleMedia){
/* iphone5s protrait */
var mq1 = window.matchMedia('screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait)');
if(mq1.matches) {
// the width of browser is less then 320px ,capable to small portrait screen
offeset_x=144;
offset_y=30;
} else {
// the width of browser is more then 320px,capable to large portrait screen
offeset_x=144;
offset_y=50;
}
}else{
// the width of browser is more then 320px,capable to large portrait screen
offeset_x=144;
offset_y=50;
}
}
其中:orientation是方向,可以用portrait和landscape两种值,对应垂直和水平方向。
如果在css中,这么写:
#rep #imgtab tr div img{
width:10rem;height:10rem;position:relative;z-index:-999;
}
/* iphone5s(iphone5) responsitive setting: one hava to remove the style nested in document element,otherwise the media query will not work(due to priority) */
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
#rep #imgtab tr div{
background-image:url(<%=ctx%>/weixin/images/closed.png);
background-repeat:no-repeat;
background-position: 8.3rem 2px;
padding-top:10px;
background-size:20px;
}
#rep #imgtab tr div img{
width:9rem;height:9rem;position:relative;z-index:-999;
}
}