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

简介: 网易首页实现页面(字体)响应式风格的方式是在不同尺寸的视口中使用不同的容器类,如图 1所示。当视口大于等于1420px时,使用大尺寸容器类 (index2017_1200_wrap,width: 1200px),当视口小于 1420px时,使用小尺寸容器类(index2017_960_wrap,width: 960px)。

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

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

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

fd5e87872586151c68d323712a0a9d6fa19104c6

 CSS3之rem兼容性调研

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

0f1ad024fc637113836c6282f0da8cfeea77246d

测试代码如下:


<!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

不足:需要两套样式,维护工作量较大,视口大小判断不够准确,对于视口变化的响应不及时,页面在响应缩放时会略有卡顿,应对未知变化(比如视口大小的划分从两档变为三档)的能力差。

分屏加载

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

关于前端开发管理的思考

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



原文发布时间为:2018年06月27日
原文作者:浩瀚动酷
本文来源: 掘金  如需转载请联系原作者


相关文章
|
27天前
|
缓存 前端开发 JavaScript
前端技术探索:构建高效、响应式Web应用的秘诀
前端技术探索:构建高效、响应式Web应用的秘诀
48 0
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
71 3
|
6天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
25天前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
25天前
|
移动开发 前端开发 JavaScript
前端开发:从零到一构建响应式网页
【10月更文挑战第1天】前端开发:从零到一构建响应式网页
32 2
|
13天前
|
缓存 前端开发 UED
前端 8 种图片加载优化方案梳理
本文首发于微信公众号“前端徐徐”,详细探讨了现代网页设计中图片加载速度优化的重要性及方法。内容涵盖图片格式选择(如JPEG、PNG、WebP等)、图片压缩技术、响应式图片、延迟加载、CDN使用、缓存控制、图像裁剪与缩放、Base64编码等前端图片优化策略,旨在帮助开发者提升网页性能和用户体验。
77 0
|
24天前
|
JavaScript 前端开发 开发者
使用 Vue.js 和 Vuex 构建响应式前端应用
【10月更文挑战第2天】使用 Vue.js 和 Vuex 构建响应式前端应用
23 0
|
2月前
|
Web App开发 前端开发 JavaScript
Web前端项目的跨平台桌面客户端打包方案之——CEF框架
Chromium Embedded Framework (CEF) 是一个基于 Google Chromium 项目的开源 Web 浏览器控件,旨在为第三方应用提供嵌入式浏览器支持。CEF 隔离了底层 Chromium 和 Blink 的复杂性,提供了稳定的产品级 API。它支持 Windows、Linux 和 Mac 平台,不仅限于 C/C++ 接口,还支持多种语言。CEF 功能强大,性能优异,广泛应用于桌面端开发,如 QQ、微信、网易云音乐等。CEF 开源且采用 BSD 授权,商业友好,装机量已超 1 亿。此外,GitHub 项目 CefDetector 可帮助检测电脑中使用 CEF
216 3
|
2月前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。
|
3月前
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力:从基础到实战,打造灵动响应式网页!
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位,包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素;百分比和em/rem利于构建响应式布局;视窗单位适合全屏设计;fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
55 4