发表于： 2017-03-20 21:31:09
1 832
今天完成的事情：上午试图从bootstrap框架中抽离出自己制作官网时用到的组件代码，但是发现是个费力不讨好的事情。虽然查看了任务详解，通过比喻的方法对组件和模板有了更生动的理解，但是要自己写一个可以重复使用的组件或者模板出来，感觉还是有些困难，任务8在编写过程中顶部和底部的导航栏考虑到重用性，也是单独建立了一个css引用进三个网页的，只是是在bootstrap的基础上实现的。其他方面的再独立出来，感觉有些困难。又查看了一下任务15的要求，是通过less在不使用框架的情况下写官网的代码，感觉还是先做任务15，在从任务15中提炼出组件和模板来更加省力一些。下午又查看了一下各分院师兄们关于任务14的做法，也是并不一致，还是打算按上午的想法做。下午又开始准备小课堂了，所以也就没有再继续搞，又要在延长一天了。
明天计划的事情：开始任务15的学习，考虑不使用框架编写网页需要注意哪些问题，并有意提取组件或者模板，用less分类编写再统一引入。
遇到的问题：发现自己拆分组件和模板的能力有限，又或者说对这方面没有什么直观的概念，不清楚如何编写一个达到可无限重复使用要求的组件。所以决定先跳过任务14，先从任务15下手试试。
收获：就今天晚上的小课堂进行整理：
响应式布局的优点与缺点？
1.背景介绍
随着智能手机的迅速发展，大众群体使用手机访问互联网的频率已经超过了使用pc端的频率。面对这样的一个大趋势和潮流，许多传统的pc厂商和互联网企业都在争抢其中的红利，自然，传统的只能在pc端显示的网页，如何适应这个潮流，也成了人们开始关注和解决的问题。于是响应式布局的概念就被提出来了，响应式布局是Ethan Marcotte（伊森·马科特）在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
2.知识剖析
什么是响应式布局？
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
第一点，在分辨率不同，设备环境进行一些不同的设计，对于小企业而言，所有开发维护和运营上，相对多个版本成本会降低很多。
第二点，兼容性好，跨平台，移动设备尺寸参差不齐，版本定制通常只适用于固定规格的设备，但不适用分辨率变化较大的设备，响应式布局能够较好的解决这个问题。
第一点，移动端和PC端页面加载的内容是一样的，代码多了，会出现隐藏无用的元素，加载时间加长导致文件增大，影响加载速度，流量消耗也相对比较大。
第二点，局限性，对于响应式，局限性较大，不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，而响应式最忌讳较多内容，代码过多会影响运行速度。
第三点，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
第四点，对于响应式Web设计，为搜索引擎确定关键字不是一件容易的事。用户在不同终端的搜索习惯不同，移动用户多采用不同的关键字，而搜素引擎对移动网站和电脑网站的关键词处理策略也不相同。不利于搜索引擎的关键词优化。
第五点，如果计划把一个现有网站转化成响应式网站，可能耗时更多。如果你想要一个响应式网站，最好从草图开始重新设计。
3.常见问题
问题: 如何实现响应式布局？
4.解决方案
第二种，要看公司的体量和要求了。如果前端大牛很多，自己搞一套响应式的框架或者组件直接使用也不是不可能。
第三种，具体而言，就是合理使用媒体查询的功能，这也是实现响应式布局的主要手段。网页的基本单位不能是固定单位，使用百分比、em、rem、vw、vh等(弹性布局和流体布局）。
5.编码实战
demo：http://119.10.57.69:880/ptt246/task10/task10.html
6.扩展思考
问题:自适应网页好做还是响应式网页好做？
7.参考文献
参考一：百度百科：http://baike.baidu.com/item/响应式布局?fr=aladdin
参考二：为什么响应式网站是一个坑：http://www.chinaz.com/news/2016/0106/492567.shtml
参考三：什么是响应式布局？响应式布局优缺点以及设计思路分享：http://www.5icool.org/a/201211/a1665.html
参考四：响应式布局的三大要点：http://www.cnblogs.com/dengzk/p/4962000.html
8.更多讨论
讨论点：除了使用媒体查询，还有什么方法可以实现让网页随屏幕变化的功能？
返回列表
评论