手机端页面如何固定图片的大小

以前写移动端页面最头疼的就是图片比例的问题，因为它的自动缩放，高度是不好控制的，那么他如何去固定呢，这就使用到了rem属性，这段时间我用rem做了一个实例，济南美思慕整形移动页面：

这里面的图片就全部固定了大小，

.jp-nr li img{width:26.33333rem; height:19.16666rem;}

但是rem不跟PX一样直接量出来，它是通过效果图的宽度计算出来的，我们这个页面做的是750px宽， 那么计算这个的时候就用图片的宽度除以12，就出来图片的宽度了，但是有时候不是那么精准，因为它不像PX一样是固定的。那么这个12是哪里来的呢，这就用到了上次说的媒体查询，

@media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
 html,body {
 font-size:12.5px;
 }
 }
 @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
 html,body {
 font-size:11.25px;
 }
 }
 @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
 html,body {
 font-size:10px;
 }
 }
 @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
 html,body {
 font-size:9.375px;
 }
 }

你这里面对应的字体是多大，你就用它本身的宽去除以你写的像素就算出来了，建议大家先去自己写个demo尝试一下。