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

时间 2019-11-20

标签简单粗暴移动页面开发技能栏目无线繁體版

原文原文链接

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

大宽度用%，高度和小宽度所有使用rem，简单粗暴。css

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

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

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

由于手游是横屏的，因此设计稿也有了些改变。内容尽量集中在横向，减小用户上下滑动的次数。因此设计师按照960px出的稿。java

前端步骤

html{font-size:100px;}

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;

由于javascript代码是最后加载的，因此打开页面后会有短暂布局混乱现象，以后js代码才生效。函数

为了解决这个问题，须要在页面加载完成以前就运行这段js代码。因此须要把这段代码放到<head></head>里。要注意的是这时jq插件还没加载，因此要用原生的写法。布局

<script>
  function adjust(){
    // 设计稿宽度是960px
    var $html = document.getElementsByTagName('html')[0];
    var viewh = document.documentElement.clientWidth;
    var scale = viewh / 960;
    $html.style.fontSize = 100 * scale + 'px';
    alert("test");
  }
  // 进入、刷新页面时执行函数，调整根字体
  window.onload=adjust();
  </script>

能够测试一下，当页面没有任何内容的时候就会弹出“test”。测试

OVER!字体

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

前端步骤

网上关于响应式开发的优秀总结有不少，本身写这篇只是初窥门径，简单粗暴，酌情使用。 —> __—>