黑马商城项目_导航部分

1、html结构

<nav><ul class="clearfix">            <li>                <a href="#">                    <img src="images/nav0.png" alt=""/>                    <p>分类查询</p>                </a>            </li>  </ul></nav>

2、样式表

（1）li浮动定位，一行浮动4个商城导航图标，每个图标80*80px

（2）img元素没有设置宽度和高度，在加载图片时

iphone3：       屏幕的一个逻辑像素点对应图片文件的一个像素；80*80px的图片对应80*80的物理像素，也对应80*80逻辑像素的宽度；

iphone4 5 6 ：屏幕的一个逻辑像素点对应图片文件的一个像素；      80*80px的图片对应160*160的物理像素，等比例压缩到1/2后，变成80*80物理像素点，也对应40*40的逻辑像素的宽度，所以显示大小是iphone3的一半；

iphone6plus:  屏幕的一个逻辑像素点对应图片文件的一个像素；        80*80px的图片对应240*240的物理像素，等比例压缩到1/3后，变成80*80物理像素点，也对应26.6*26.6的逻辑像素的宽度，所以显示大小是iphone3的1/3，是iphone4的2/3。

3、总结：图片渲染问题

（1）图片文件的像素点与图片大小一点关系也没有，他仅仅描述一行有多少点，一共有多少行。

（2）img不设置宽高：加载图片文件时一个像素点对应图片文件的一个像素点，屏幕一行物理像素对应图片文件的一行；

（3）img设置宽高：    加载图片后自动缩放

4、导航图标：前面80*80的图片 后面是160*160的图片，在img未设置宽高是，iphone5 加载效果