黑马商城项目_导航部分

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：       dpr=1，屏幕的一个逻辑像素点对应屏幕一个逻辑像素点对应图片文件的一个像素；

                      80*80px的图片对应80*80的物理像素，也对应80*80逻辑像素的宽度；

iphone4 5 6 ：dpr=2，屏幕的一个逻辑像素点对应屏幕4个物理像素点（横向2个纵向2个）； 

                      80*80px的图片对应80*80的物理像素，也对应40*40逻辑像素的宽度；所以是ip3的一半大小。        

iphone6plus:  dpr=3，屏幕的一个逻辑像素点对应屏幕9个物理像素点（横向3个纵向3个）；        

                      80*80px的图片对应80*80的物理像素，也对应(80/3)*(80/3)逻辑像素的宽度；所以是ip3的三分之一大小，是iphone4、5、6的三分之二大小。

3、总结：图片渲染问题

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

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

（3）img设置宽高：    加载图片后自动缩放，width和heigh设置的是逻辑像素值

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

（1）80*80的图片：图片宽高为40个逻辑像素，所以4个图片的宽度和为屏幕宽度的一半

（2）160*160的图片：图片宽高为80个逻辑像素，所以4个图片的宽度和为屏幕宽度