首页  >  文章  >  web前端  >  移动WEB布局视频教程

移动WEB布局视频教程

黄舟
黄舟原创
2017-08-25 16:44:231823浏览

《移动WEB布局视频教程》介绍移动web的开发基础,高效的排版布局,常见的移动web问题,终端触摸交互,各种bug坑如何解决等多方面。说到移动端,不得不提适配问题,大大小小的移动设备不但让做Android和iOS的难过,因为设备大小和浏览器的差异,现在也让前端开始头疼了,不过,方法总是比问题多,我们是革命的队伍,遇到问题就要上!

CO{BU_Q_N5JHTKLHWI5UXWM.png

课程播放地址: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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn