网易首页响应式风格实现技术调研
网易首页实现页面（字体）响应式风格的方式是在不同尺寸的视口中使用不同的容器类，如图 1所示。当视口大于等于1420px时，使用大尺寸容器类 （index2017_1200_wrap，width: 1200px），当视口小于 1420px时，使用小尺寸容器类（index2017_960_wrap，width: 960px）。容器类的切换依赖于JavaScript 监听，如图 2所示，并未使用CSS3的媒介查询。
网易首页在发生视口改变时，如果引起了字体和布局的响应式变化，则页面会有所卡顿。
图 1 网易首页所使用的容器类
图 2 网易首页用于监听视口变化的代码
CSS3之rem兼容性调研
使用rem作为单位时的浏览器兼容如图 3所示。需要注意的是，IE9 / IE10 不支持font属性简写时使用rem指定字体大小，IE9 / IE1 / IE11不支持伪元素的line-height属性使用rem作为单位。
测试代码如下：
<!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 搬迁到新项目
改造已有项目的优势：
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
不足：需要两套样式，维护工作量较大，视口大小判断不够准确，对于视口变化的响应不及时，页面在响应缩放时会略有卡顿，应对未知变化（比如视口大小的划分从两档变为三档）的能力差。
分屏加载
对于内容较多，特别是图片较多的页面，使用分屏加载技术，避免出现首页初始化时大量加载静态资源，导致响应缓慢的问题。
关于前端开发管理的思考
在开发工作进行前和进行中是否考虑加入技术评审环节应当加强文档管理，包括项目的版本记录，项目所使用到的资源（静态资源、模块、公共类等）记录等。
扫一扫
5942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
