做有态度的前端团队

网易FEG前端团队

聊聊PC端页面适配

PC端适配?什么鬼!!!做不了~
PC端适配?又不早说,都做完了,还适配毛线~
页面有bug!!!!为什么我笔记本打开只看到一半~
...
以前谈适配只会想到移动项目,而有时候转做pc端,有一个很爽的感觉就是什么的尺寸都可以写死,不需要担心设备尺寸不同的问题。但是现在越来越多的PC项目也有适配的需求:目前我们pc项目的设计稿尺寸是宽度1920,高度最小是1080。对于宽度,我们规范了主体内容在1200以内,高度只有个最小值规范。

为什么pc需要考虑适配

因为pc需要考虑最小设备主体是1366*768分辨率的14寸普通笔记本,768的高度减去浏览器工具栏和桌面任务栏,实际的可视高度只有650左右,我们的项目还要减去页面通用顶条的55px,对于一些只有单屏的pc页面(比如一些预约官网,单屏,主体画面有1080高),必然是远远不够的。如果按照设计稿的实际尺寸写死,最终结果在笔记本几乎只能看到主体画面的一半。
如果上下都有主角的画面(比如下图),只看到一半,需求能答应么?显然不能!有人说,不是有滚动条么,滚下来就可以看到完整啦~但是一个主角被分成两半,要用户通过上下滚动才能看得完整,效果就差很多了,到最后需求确认时肯定得改改改!!!
art02.jpg

art01.jpg

哪些pc项目需要考虑适配

  • 项目开始之前,需求明确要求的!(这就不用说了,但是实际这一点很少,至少目前比较少需求有这个意识)

  • 只有一屏设计的pc项目(包括滚屏切换效果的页面)

因为考不考虑适配,可能代码结构、切图的处理方式都不一样,所以做之前有意识的加入适配的考虑很重要,否则等到做完后需求确认再提出,第一显得你不够专业,第二我们只能等着返工调整了。后期返工调整,多花20%~30%的时间一点都不夸张!

如何做适配

说了很多,其实只有一个重点,适配已经不再是移动项目的需求了,pc项目加入适配意识也是我们前端需要迫切考虑了。
那么如何做适配呢?pc的设备主要是宽屏的,所以主要考虑高度的适配,而宽度最后能铺满(主体不需要铺满,但是背景需要)。但是目前pc并没有像移动端那样,可以用rem单位这种一站式解决方案,因为pc需要考虑低级浏览器,媒体查询和background-size这些新属性都不能用。
下面就最近的项目,探讨一下pc适配有哪些方法:

1、百分比的应用

百分比的应用在于主视角的定位和缩放,百分比的取值以原设计稿的尺寸为标准。什么意思呢?举个栗子,一个元素在原设计稿里,量出来距离顶部是200px,如果写死可能是top:200px 或者margin-top:200px,现在要转成百分比,那么这个值可能就是23.3%。这个值怎么算?如果设计稿是1080,200/1080=18.51%这样计算出来百分比的值。
但是,有个地方要注意,流体布局下,百分比的值是根据父层计算的;absolute布局的元素是根据最近的relative父层计算的;fixed布局的元素是根据window的可视区域计算的。
所以,如果要达到适配的效果,不只是当前元素需要用百分比值,其参考计算的元素也是要动态变化的。

另外还有一个就是图片缩放的问题,pc很多主视角都是切图的,但是pc不能直接用background-size(虽然强大的filter兼容可以使低版本ie支持,但是之前说过用filter都要特别小心,特别是涉及到js交互操作的,很多坑)。在pc我们可以直接通过img标签来插入图片,通过设置img宽度为100%,高度auto,然后让它根据父层来等比缩放来实现(img标签实现缩放引起的另一个问题是该图片不能用雪碧图了,但pc的主视角不是很多,影响不大)。

2、js监测

看似上面的百分比应用已经可以解决适配问题了,那么还要js干嘛?而且用到js肯定耗性能啦~
20150201163209_NNruz.jpeg

百分比的确可以解决大部分问题,但不是万能的喔,继续看下去~
需要js主要有两个原因:

  • 上面说了,百分比是要有父层做参照物的,那么如果父层都用百分比,那就是最终是根据window来参照的,因为pc绝大部分都是宽屏设备,而且他们的比例是不一致的,我们来计算下(190是减去浏览器工具条、window桌面条、我们页面通用顶条):
    设计稿:1920/(1080-190) = 2.16
    14寸普通笔记本:1366/(768-190) = 2.36
    所以,我们不能宽高都100%按照屏幕尺寸来计算。另外考虑到主要是高度对pc页面的主视角影响比较大,我们需要借助js来计算确定一个最小高度临界值(当然这个可以用css的min-height来实现);

  • 另外一个是,通过js判断最小高度临界值,再加上这个最小临界值的class,为了处理那些特殊的布局或者百分比无法完全解决适配的元素,比如字体的相关布局

上面说了,pc目前暂时没找到有一站式的解决方案,也并不是说所有项目都要适配到一屏显示完(我们确保主视角大部分显示就行了),所以经常需要综合使用上面的方法,来最终达到适配的效果(上两张压缩图,线上地址):
1920*1080下:

art04.png

1366*768下:

art03.png

写完啦,有下午茶吃了~

201409141243109645.gif

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

已有 93 条评论

  1. 0KeeTeam

    0KeeTeam

    1. 0KeeTeam

      0KeeTeam

    2. 0KeeTeam

      0KeeTeam

    3. 0KeeTeam

    4. 0KeeTeam

      zmpruqglxgjjkmgvbfxf

    5. 0KeeTeam

      0KeeTeam

    6. 0KeeTeam

      0KeeTeam//and//cast(md5('1254788386')as/**/int)>0

    7. test

      test

    8. test

      test

    9. %{42072*42737}

      test

    10. test

    11. rjxgkojtfvujzmcmslgu

      test

    12. test

      test

    13. test

      %{40548*43222}

    14. test

      test

    15. test

      test
      CRLF-Header:CRLF-Value

    16. test

      test

    17. test

      test

    18. test

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

    19. test

    20. test

      '+(40390*43630)+'

    21. test

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

    22. test

      test

    23. test

      test

  2. 0KeeTeam

    0KeeTeam

  3. 0KeeTeam

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

    0KeeTeam

  5. 0KeeTeam

    nbjryyeeoydgxcosktws

  6. loto

    team

  7. 0KeeTeam

    0KeeTeam

  8. 0KeeTeam

    0KeeTeam

  9. 0KeeTeam

    0KeeTeam

  10. cycarvwuobtfmveiabcv

    0KeeTeam

  11. 0KeeTeam

  12. 0KeeTeam

    0KeeTeam
    CRLF-Header:CRLF-Value

  13. 0KeeTeam

  14. 0KeeTeam

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

  15. 0KeeTeam

  16. krowyvpgkuhhokohoxcb

    0KeeTeam

  17. 0KeeTeam

    0KeeTeam

  18. 电饭锅

    ali-60.gif

  19. Crawlergo

    Crawlergo

  20. Crawlergo

    Crawlergo

  21. lheypwvtrqhkudvehqhf

    Crawlergo

  22. Crawlergo

    Crawlergo
    expr 975814730 + 941404102

  23. Crawlergo

    Crawlergo|expr 820745565 + 851214282

  24. Crawlergo

  25. Crawlergo

    Crawlergo$(expr 904105978 + 877524105)

  26. Crawlergo

    Crawlergo
    CRLF-Header:CRLF-Value

  27. Crawlergo

    lheypwvtrqhkudvehqhf

  28. Crawlergo

    Crawlergo&set /A 842429892+824458014

  29. test

    test

  30. test

    test

  31. test

    test

  32. test

    test

  33. test

    test

  34. test

    test

  35. ldcczunoakaruggsqyfl

    test

  36. test

    test

  37. test

    test

  38. test

    test

  39. %{44700*42900}

    test

  40. test

    test

  41. test

    test

  42. test

    test

  43. test
    &content;
  44. test

    test

  45. test

    test

  46. test

    test

  47. test

    test

  48. test

    test

  49. test

    test

  50. test

    test

  51. test

    test

  52. test

    test

  53. test

    test

  54. test

    test

  55. test

    vjokefsxpofqvuvekkxo

  56. test

    test
    expr 846802598 + 841928651

  57. %{42466*40433}

    test

  58. test

    test

  59. test
    &content;
  60. test

    test|expr 943680064 + 937369174

  61. test

    test

  62. test

    test

  63. test

    test

  64. test

    test

  65. test

    test

  66. test

    test

  67. test

    test

  68. test

    test

  69. test

    test

  70. test

    test

添加新评论

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