响应式方案调研及前端开发管理思考
网易首页响应式风格实现技术调研
网易首页实现页面（字体）响应式风格的方式是在不同尺寸的视口中使用不同的容器类，如图 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
不足：需要两套样式，维护工作量较大，视口大小判断不够准确，对于视口变化的响应不及时，页面在响应缩放时会略有卡顿，应对未知变化（比如视口大小的划分从两档变为三档）的能力差。
分屏加载
对于内容较多，特别是图片较多的页面，使用分屏加载技术，避免出现首页初始化时大量加载静态资源，导致响应缓慢的问题。
关于前端开发管理的思考
在开发工作进行前和进行中是否考虑加入技术评审环节应当加强文档管理，包括项目的版本记录，项目所使用到的资源（静态资源、模块、公共类等）记录等。
更多专业前端知识，请上 【猿2048】www.mk2048.com
响应式方案调研及前端开发管理思考相关推荐
- 【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录 一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端 一.移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问 ...
- 14个支持响应式设计的流行前端开发框架
在几年前,并没有真正意义上的前端开发.随着网络技术的发展,网站和 Web 应用程序变得越来越复杂,前端部分的工作独立出来逐渐成为现在的前端开发.如今,我们可以看到越来越多的公司在招聘前端开发岗位. 前 ...
- uniapp制作pc端响应式布局——带开源前端【伸手党福利】【持续更新】
实现目标:uniapp一套式制作pc端.pad端.手机端.符合国家等保二级标准. 目录 技术分析 pc端(pad端)与移动端的开发区别 1. 用户操作习惯. 2. 界面区别. 3. 表格区别 4. 技 ...
- WEB前端开发的思考与感悟
最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等.遇到过一个不太熟搞后台开发的同事跑来问我学习前端需要掌握哪些内容,也听说过一个搞IOS开发准备自学前端半个月然 ...
- Web前端开发的思考与经验----五年工作经验
最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等.遇到过一个不太熟搞后台开发的同事跑来问我学习前端需要掌握哪些内容,也听说过一个搞IOS开发准备自学前端半个月然 ...
- Web前端开发的思考感悟，看完文章你再考虑是否入坑
和平使者大酋长 最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等.遇到过一个不太熟搞后台开发的同事跑来问我学习前端需要掌握哪些内容,也听说过一个搞IOS开发准备 ...
- Web前端开发的思考与感悟，看完这篇文章你再考虑是否入坑！
最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等.遇到过一个不太熟搞后台开发的同事跑来问我学习前端需要掌握哪些内容,也听说过一个搞IOS开发准备自学前端半个月然 ...
- 高度随宽度适应的响应式方案
概述 高度随宽度自适应有很多种方案,这里只讨论一种巧妙的方案,就是利用margin/padding.我把代码记录下来供以后开发时参考,相信对其他人也有用. 知识点 margin/padding有这么一 ...
- WordPress简洁响应式WP主题大前端DUX7.1主题 免授权无限版
源码下载地址:https://zy.prmath.com/146.html v7.1更新日志: 新增分类目录模版 多级分类筛选(新增或编辑分类目录时可选设置): 新增评论提交时使用验证码校验(主题设置 ...
最新文章
- Asp.net中动态在中加入Scrpit标签
- Dubbo标签解析原理
- CodeForces - 1311D Three Integers(暴力)
- 通过路由器的IP映射来解决，两个不同IP地址的PC机之间的从LAN口到WAN口的单向通讯问题
- Win10系列：JavaScript动画3
- CheckStyle检查规则模板说明
- vs2005环境的一些快捷键
- 【李宏毅2020 ML/DL】P3 Regression - Case Study
- SqList *L 和 SqList * L的区别
- 非华为电脑安装华为电脑管家
- filmimpact安装教程,PR插件『FilmImpact.net』下载与安装教程
- 普罗米修斯prometheus
- 汉高将在上海成立新的粘合剂技术创新中心；宁德时代与戴姆勒卡车扩大全球合作伙伴关系 | 美通企业日报...
- vue实现li列表的新增删除和修改
- 美颜相机android版,美颜相机手机版
- STM32MP157网络环境 TFYPNFS搭建手册-学习记录
- 大数据学习之Hive
- php 点餐系统 毕业设计,php毕业设计_基于php的校园餐厅网上订餐系统
- 关于三个不同摄像头及数据采集
- Jquery ajax, Axios, Fetch区别之我见 Axios中文说明