响应式方案调研及前端开发管理思考

时间 2019-11-29

原文原文链接

网易首页响应式风格实现技术调研

网易首页实现页面（字体）响应式风格的方式是在不一样尺寸的视口中使用不一样的容器类，如图 1所示。当视口大于等于1420px时，使用大尺寸容器类（index2017_1200_wrap，width: 1200px），当视口小于 1420px时，使用小尺寸容器类（index2017_960_wrap，width: 960px）。容器类的切换依赖于JavaScript 监听，如图 2所示，并未使用CSS3的媒介查询。css

网易首页在发生视口改变时，若是引发了字体和布局的响应式变化，则页面会有所卡顿。html

图 1 网易首页所使用的容器类前端

图 2 网易首页用于监听视口变化的代码css3

CSS3之rem兼容性调研

使用rem做为单位时的浏览器兼容如图 3所示。须要注意的是，IE9 / IE10 不支持font属性简写时使用rem指定字体大小，IE9 / IE1 / IE11不支持伪元素的line-height属性使用rem做为单位。浏览器

测试代码以下：bash

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    html{
      font-size: 20px;
    }
    .bigger{
      font-size: 2rem;
    }
    .biggest{
      font-size: 4rem;
    }
    .font-shorthand{
      font: italic bold 5rem/1.2 Arial, sans-serif;
    }
    .padding-shorthand{
      border: 1px red solid;
      margin: 3rem;
      padding: 5rem;
    }
    .pseudo-class{
      line-height: 6rem;
    }
    .pseudo-class:hover{
      cursor: pointer;
      font-size: 5rem;
    }
    .pseudo-element:after{
      content: '这是伪元素元素';
      line-height: 20rem;
      font-size: 5rem;
    }
  </style>
</head>
<body>
  <div>原生字体</div>
  <div class="bigger">较大字体</div>
  <div class="biggest">最大字体</div>
  <div class="font-shorthand">font简写</div>
  <div class="padding-shorthand">margin 和 padding 简写</div>
  <div class="pseudo-class">伪类</div>
  <div class="pseudo-element">伪元素</div>
</body>
</html>
复制代码

网站技术方案改造

改造已有项目 VS 搬迁到新项目
框架

改造已有项目的优点： less

1.开发内容归属明确。
2.部署结构无需变化。

改造已有项目的不足：布局

1.历史负担较大。
2.须要新增一套前端公共资源，引发代码冗余，增长维护成本。

采用新项目开发的优点：测试

1.历史负担小。
2.但是使用新框架进行开发、发布，流程更加可控。
3.能够避免setting.js的选择加载，提升加载效率。

采用新项目开发的不足：

1.新项目的归属问题有待商榷。
2.项目过多可能增长管理工做量。
3.系统部署更加复杂。

响应式风格的实现

方案一：rem + 媒体查询方案（推荐）

方案描述：使用媒体查询设置特定视口尺寸下根元素的字体大小，使用rem为单位设置具备响应式风格的元素的属性，使用less的混入功能实现低级浏览器降级的需求。

优点：响应速度快，代码量小，应对未知变化（好比视口大小的划分从两档变为三档）的能强，增长pc端使用rem的团队经验。

不足：必须采用IE8对应的降级策略，可能有未知的坑。

方案二：固定class + 媒体查询方案

方案描述：使用媒体查询，在特定的视口宽度下为特定的公共样式适用特定的字体大小、行高等属性，使用css3-mediaqueries-js等方案处理IE8的兼容问题。

优点：响应速度较快，基本兼容IE8，虽然须要两套样式可公共样式代码量小，应对未知变化（好比视口大小的划分从两档变为三档）的能较强。

不足：须要作响应式风格的元素须要包含特定的公共样式名（类名），增长了代码量和维护工做量。

方案三：可变容器方案网易目前使用

方案描述：在不一样的容器下定义两套样式，使用JavaScript监听视口尺寸变化，当视口尺寸的变化达到临界值时，变换顶级容器。

优点：彻底兼容IE8

不足：须要两套样式，维护工做量较大，视口大小判断不够准确，对于视口变化的响应不及时，页面在响应缩放时会略有卡顿，应对未知变化（好比视口大小的划分从两档变为三档）的能力差。

分屏加载

对于内容较多，特别是图片较多的页面，使用分屏加载技术，避免出现首页初始化时大量加载静态资源，致使响应缓慢的问题。

关于前端开发管理的思考

在开发工做进行前和进行中是否考虑加入技术评审环节应当增强文档管理，包括项目的版本记录，项目所使用到的资源（静态资源、模块、公共类等）记录等。