移动WEB布局视频教程

课程播放地址：http://www.gxlcms.com/course/428.html

该老师讲课风格:

教师讲课生动形象，机智诙谐，妙语连珠，动人心弦。一个生动形象的比喻，犹如画龙点睛，给学生开启智慧之门；一种恰如其分的幽默，引来学生会心的微笑，如饮一杯甘醇的美酒，给人以回味和留恋；哲人的警句、文化的箴言不时穿插于讲述中间，给人以思考和警醒。

本视频中较为难点是移动web特别样式处理了：

高清图片问题

高清图片跟我们平时下的那种电影高清图片是不一样的，移动Web的高清图片的概念是我这张图这么大，清晰度这么多，那么我们在移动设备上就该展示这么清晰。那么为什么会产生模糊呢？假如一张图片 100px * 100px 那我们在移动设备上就以 100px * 100px 去展示，这想想也是没有问题的。

但我们想想，在Retina屏幕，一个px等于两个dp，那你拿 100px*100px 实际上是拿了 200dp * 200dp 物理像素去渲染，图片就会被拉大被模糊。

在移动Web页面上渲染图片，为了避免图片产生模糊，图片的宽高应该用物理像素单位渲染，即是 100 * 100 的图片，应该使用 100dp * 100dp。

width:(w_value/dpr) px; 
height:(h_value/dpr) px;

那说白了，在高清屏幕下，假如100*100的图片，那么我们就应该使用50*50的px去渲染，那如果在iPhone6 Plus下这时候dpr大于2的话，那我们就应该除以它的dpr(3)这样的方式。

这里还给大家推荐了源码资源的下载：http://www.gxlcms.com/xiazai/code/2051

这个给大家分享了视频的课件：

1.移动WEB布局视频教程