《移动WEB布局视频教程》介绍移动web的开发基础,高效的排版布局,常见的移动web问题,终端触摸交互,各种bug坑如何解决等多方面。说到移动端,不得不提适配问题,大大小小的移动设备不但让做Android和iOS的难过,因为设备大小和浏览器的差异,现在也让前端开始头疼了,不过,方法总是比问题多,我们是革命的队伍,遇到问题就要上!
课程播放地址:http://www.php.cn/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.php.cn/xiazai/code/2051
这个给大家分享了视频的课件:
1.移动WEB布局视频教程
以上是移动WEB布局视频教程的详细内容。更多信息请关注PHP中文网其他相关文章!