概要：网页自适应是什么？要解决什么问题？有什么方法论？其他站点的实现？我们站点现状？针对本站点提出建议？
网页自适应设计
网页自适应指网页自适应显示在不同大小的终端设备上，要解决的问题是：如何才能在不同大小的设备中呈现同样的网页；如浏览器缩放时，如何保证用户最大的网页可视内容，并且页面不错乱；
帮助完成网页自适应的几个思想
（1）流式布局
随着屏幕尺寸变小，内容会占据更多垂直空间，后面的内容会自然下推占据更多的垂直空间，水平上有所限制，垂直延生；
（2）尽量使用相对单位
随着浏览器视窗大小变化，网页的画布大小可以是0~终端屏幕大小之间的任意尺寸，所以在完成响应式布局时需要比较灵活、在各种屏幕上都可以使用的单位。如：实现两列布局，可以将每列宽度width=50%；
（3）把握最大值和最小值
有时候屏幕缩小，会尽量是网页内容布满浏览可视局域，但也不能无限制的随着浏览器屏幕缩小而缩小，这时候max/min值就起作用了。比如，一个div.container的样式如下：
.container{
width:100%;
max-width:1200px;
min-width:500px;
}
此时div.container会占据满父容器，但同时最大宽度不会超过1200px;最小宽度不会小于500px;
(4)断点media query
断点允许布局在预定义的点改变，根据media quey确定在不同尺寸，不同条件时页面的布局方式；
详细使用方法:css3-mediaqueries
(5)嵌套对象
让很多元素的位置依赖于其它元素来定位是很难控制好的，因此使用容器来包裹元素可以让它更易理解，也更整洁。
(6)位图VS矢量图
如果图标细节上需要考虑比较花哨的效果，可以考虑位图，同时要考虑不同分辨率使用不同尺寸的图，如果图标纯色单一可以使用矢量图，最好选择SVG或图标字体；（关于图标：想多说一句，本来说引入字体图标的，后来没引入，原因是？自动生成图标工具gulp-css-spriter）建议使用；
其他站点在网页自适应实践
大体是图片自适应，缩小、下放、隐藏
1.http://www.indochino.com
2.http://www.etao.com/?tbpm=20160324
3.https://plus.google.com/collections/featured
4.http://skinnyties.com/
5.http://getbootstrap.com/2.3.2/
6.http://new.36kr.com/
目前官网状态
部分页面的部分区域简单地实现了响应式显示；
专题列表页
（1）页面宽度足以容纳两个元素并排时，一排两个元素，呈现双列模式；
3.png
（2）页面宽度缩小到一定度时，列表呈现单列模式；
4.png
首页：独家、日漫、男生、女生区块实现简单的响应式设计
思想：
work-item float：left，通过查询screen宽度，控制work-item的父容器.container宽度是宽度能搞好特定个数的work-item不留空白；
@media screen and (min-width: 1020px) and ( max-width: 1200px) {
.page-index .container{
min-width: 1200px;
}
}
@media screen and (min-width: 880px) and ( max-width: 1019px) {
.page-index .container{
min-width: 1019px;
}
}
@media screen and (min-width: 820px) and ( max-width: 879px) {
.page-index .container{
min-width: 879px;
}
}
@media screen and (min-width: 501px) and ( max-width: 819px) {
.page-index .container{
min-width: 879px;
}
}
@media screen and ( max-width: 500px) {
.page-index .container{
min-width: 500px;
}
}
效果
（1）页面大于1020px页面正常显示
document大于1020px时页面正常显示
（2）页面小于820px时，work-item分3行显示
3行显示
针对本站点的响应式建议
（1）banner推荐，宽度自适应屏幕宽度，高度随宽度等比压缩；
（2）多列布局，屏幕缩小可以考虑隐藏不重要的侧边栏；
（3）Item列表，可以考虑等比缩放每项宽度，到一定程度，选择下放元素；（或者隐藏特定项）
网友评论