网瘾青年成为魔记

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

网瘾青年成为魔记 
第一眼而看了及时题目,你肯定会看怪怪的,没错,他的爹爹之名字是
网瘾少年变成长记,在许多双亲小孩心目中构思千万潮的题目。不过今天你们那个庆幸,看到了她们到底是安成魔的。
为什么说成魔呢?因为发了翻天覆地的变,包括载体的转变,硬件的升迁以及概念的换代。
首先得生部手机,这是乐此不疲的必要武器。你只要没有手机,就算你在网吧猝死,在那些成魔道路达的人口的眼中,你这种网瘾太低级,逼格不够。现在的游戏啊能被您成魔,比如手游,大型网络游戏啥的,但那是游戏。入魔第一神器,一个智能手机。别问我是选安卓还是苹果,对于这种不买app
store和无法翻墙的口来说,只要喝一句子“某某帮主是极牛逼”,别人就不见面接近身矣。入魔第一app,微博,微博是倒互联网时代之中央新闻联播,兼门户网站,别问我胡是兼职之,你明白什么给网络舆论评审员吗?入魔第一定义,请牢记,互联网时代是第四不良工业革命。吐槽了那基本上,其实并没什么卵用,暴走还是每周五押,微博里没有为难的事体还是会见当难受,电商软件还未打折就变成了资本家。
只是,互联网在连续的同时也折射着你本身之个性。我们每一个人犹以步入一个初的一代,而者时代里来极多之工具,缺少了该有的任性。增加了无与伦比多的猜想和唾弃,少了对智慧与漂亮之讲究与向往。一切从头给连,却无比多之了断于节点。

特别开间用%,高度与小幅度全部用到rem,简单粗暴。

事先看了大漠老师的动用Flexible实现手淘H5页面的极端适配,介绍了手淘项目之H5制作专业。
美高梅4688.com 1

当手淘的设计师和前端开发协作过程遭到:手淘设计师时选择iPhone6作为标准设计尺寸,交付受前端的筹划尺寸是比照750px
*
1334px啊本(高度会趁情节稍要变更)。前端开发人员经平等套适配规则自动适配到外的尺寸。

如果自己这次担负之路也合作社刚刚上线的手游内置网页,展示游戏公告和游乐角色信息。

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

前者步骤

  • 安装根字体大小

    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!

网上关于响应式开发之优质总结出过多,自己写就篇只有是初窥门径,简单粗暴,酌情采用。 —> __—>

发表评论

电子邮件地址不会被公开。 必填项已用*标注