Web移动端5分钟速成(适合新手)_网站前端开发_前端开发者

网站前端开发_前端开发者web前端

https://www.rokub.com

web前端学习干货指导:
html+css:这是基础,什么时候什么方向都必须牢牢记住;不要想着一查就有,那不是你的;熟能生巧,用的多你自然不会忘;忘了,你永远是小白;
js:原生很重要,起码W3scholl里的要全部掌握,基础的作用域、闭包、冒泡、缓存、循环等原理要清晰;
HTML5+CSS3:前端的特殊是:与时俱进;新技术对我们很重要,没人愿意看到一家上市公司的web还在用12年以前的语法结构;
jquery:简洁、高效需要掌握并会用,前提是原生学会先;对于移动端,用到的是zepto.js中文开发文档
zepto:jQ的阉割版专门适用于移动端,大小只有24k;却支持绝大数的jq用法;模块化安装,拓展性强;
【移动端web速成教学】
1.head部分 通用写法;网上也有,不过有的可有有的可无;原理是兼容IOS透明栏目等问题,再者就是viewport(关键)
html 代码

2.引入引用flexible.js;这是淘宝的兼容解决方案,最大到5.5寸;用的时候把viewport去掉,flexible.js会动态添加;
主要讲一下用法,网上的讲的太细却使很多网友没懂;flexible.js只有4K,作用是:
1.动态改写 <meta> 标签
2.给 <html> 元素添加 data-dpr 属性,并且动态改写 data-dpr 的值
3.给 <html> 元素添加 font-size 属性,并且动态改写 font-size 的值
接下来就可以用了,若你的图示640的 就设置1rem=64px 如果是750的就设置1rem=75px;比如320X240的banner,那么就换算成5remX3.75rem(640为例)
3.官方下载地址

flexible官方文件
详细介绍教程
zepto.js-github
总结:美团、口碑等移动端字体用的都是px,手淘官方页不建议用rem作为字体,会出现模糊和点阵的情况;但对各位前期可以先用rem,还是能解决各种兼容问题的,等以后各方面的兼容都熟练了,再替换px;
对于rem和px的转换,用的sublime有独立插件,用DW其他的可以用less和sass;另外推荐前端编辑器:webstrom(

 

网站前端开发_前端开发者丨web前端

https://www.rokub.com

» 本文来自:前端开发者 » 《Web移动端5分钟速成(适合新手)_网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/2480.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!