HTML5技术

简单粗暴的移动端页面开发技能 - 谦一

字号+ 作者:H5之家 来源:H5之家 2016-12-12 14:01 我要评论( )

简单粗暴的移动端页面开发技能 移动端响应式页面开发说简单也简单,根据屏幕尺寸调节根字体大

简单粗暴的移动端页面开发技能

移动端响应式页面开发说简单也简单,根据屏幕尺寸调节根字体大小。

大宽度用%,高度和小宽度全部使用rem,简单粗暴。

之前阅读过大漠老师的使用Flexible实现手淘H5页面的终端适配,介绍了手淘项目的H5制作规范。

在手淘的设计师和前端开发协作过程中:手淘设计师常选择iPhone6作为基准设计尺寸,交付给前端的设计尺寸是按750px * 1334px为准(高度会随着内容多少而改变)。前端开发人员通过一套适配规则自动适配到其他的尺寸。

而我这次负责的项目为公司刚上线的手游内置网页,展示游戏公告和游戏角色信息。

因为手游是横屏的,所以设计稿也有了些改变。内容尽可能集中在横向,减少用户上下滑动的次数。所以设计师按照960px出的稿。

前端步骤
  • 设置根字体大小

    html

  • js调节 1rem 对应的px大小

    $(document).ready(function() { // put all your jQuery goodness in here. function adjust(){ // 设计稿宽度是960px var scale = $('body').width() / 960; $('html').css('font-size', 100 * scale + 'px'); } // 进入、刷新页面时执行函数,调整根字体 adjust(); //视口大小调整时执行函数,调整根字体 // 目测游戏内置页面用不到,用户不会产生resize事件 $(window).resize(function(){ adjust(); }); });

  • 样式
    量取尺寸大小,换成对应的rem。比如:100px = 1rem;

  • 网上关于响应式开发的优秀总结有很多,自己写这篇只是初窥门径,简单粗暴,酌情使用。 —> __—>
    

    posted @

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作 - 怪诞咖啡

      form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】

      2016-12-10 11:00

    • 移动Web触摸与运动解决方案AlloyTouch开源啦 - 【当耐特】

      移动Web触摸与运动解决方案AlloyTouch开源啦 - 【当耐特】

      2016-12-07 15:00

    • 移动WEB viewport 相关知识 - starof

      移动WEB viewport 相关知识 - starof

      2016-12-07 13:00

    • h5的rem代替px做移动端界面的自适应就是這么简单又强大,以及我的一些经历和认识 - css_this

      h5的rem代替px做移动端界面的自适应就是這么简单又强大,以及我的一

      2016-11-30 18:00

    网友点评
    t