Red626

2016-06-29 17:01

全响应式web前端开发

本文作者:IMWeb Red626 原文出处:IMWeb社区 未经同意,禁止转载

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

为什么写这篇文章

结一老师之前有写过一篇从css角度去实现响应式的文章(下手响应式及断点设置分析),不过真正设计并实现一个全响应式网页(RWD),还需要从一开始的布局设计开始,并从页面结构、页面表现和用户交互三个方面来实现一个全响应式网页。


由于目前正在做的mini项目开发周期短,要求全平台可用,所以我采用了全响应式的页面实现,针对PC浏览器、移动端浏览器做了全适配,尽量达到前端代码的重用,减少开发和维护成本。在此向大家分享我对于设计和实现全响应式页面的一些经验和心得。

实现全响应式页面的途径

注意:本页面中的代码只是为了举例说明,实际应用还需要进行一定的修改

从结构层(HTML)上奠定responsive的天然基因

响应式页面一般会采用Grid或者Fluid的布局方式,这就要求我们的页面元素模块化,能够在不同的设备尺寸和应用环境下进行自适应。例如,在一款新闻类网站中,先将不同类型的元素进行分开设计,对于不同的实体做好封装,可以将一条新闻推送设计为卡片形式,其html结构大致如下:

<div class='news-item'>
    <div class='head'>
        <div class='source'>
            <img src='...' class='avatar'/>
            <span>中国统计网</span>
        </div>
        <div class='title one-line'>腾讯官方首次发布微信用户数据</div>
        <div class='time'>2015-10-26 18:01</div>
    </div>
    <div class='content'>
        <div class='cover'>
            <img src='...'/>
        </div>
        <div class='abstract'>
            在今天举办的 2015 腾讯全球合作伙伴大会「互联网+微信」的分论坛上,
            微信官方第一次公开了微信用户数据。
        </div>
    </div>
    <div class='bar'>
        <div class='read-count item'>
            阅读量:
            <span>1335</span>
        </div>
        <div class='like-count item'>
            点赞数:
            <span>986</span>
        </div>
        <div class='comment-count item'>
            评论数:
            <span>166</span>
        </div>
    </div>
</div>

由于其结构层次清晰,在不同的应用场景下,我们可以很方便地修改其样式(长、宽、字体、字号、颜色、显示如否等),另外尽量避免使用table定位。


还有一点比较重要的html设置,需要告知浏览器将页面宽度设置为设备宽度,并禁用缩放行为。

<meta name="viewport" content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

从表现层(CSS)上发挥responsive的后天所长

css是实现全响应式页面的关键,就如同先天基因再好,如果后天学习不够,也只能泯然众人矣。我总结了以下技术要点:

  • 充分利用position属性,比如fixed全屏定位、relative和absolute搭配实现小范围内任意定位;
  • 能使用百分比设置尺寸的地方绝不使用像素,比如宽、高采用百分比或继承,padding和小范围内定位使用像素;
  • 使用媒体查询(media query),这一CSS特性弥补了一套css样式的不足,允许页面在不同的尺寸或设备上有不同的显示样式,我们可以非常简单地定义覆盖规则
  • 使用弹性布局(display:flex),它为盒状模型提供了更大的便利性,例如可以方便地实现流式布局、居中对其等,使用它可以简便、完整、响应式地实现各种页面布局(如需进一步了解,推荐看阮一峰写的Flex 布局教程:语法篇

另外推荐结合SASS或LESS等编译器,可以使用诸如变量定义、mixin或函数、语法嵌套、工具函数等功能,提高代码重用度和可维护性。比如采用css规则嵌套,可以将css和html结构对应起来,也就是实现了css的模块化,这对于实现全响应式是很有益处的。下面是一个典型的全响应页面所使用的LESS代码:
进行变量定义,奠定网页基本样式

@font-face {
    font-family: "NotoSansCJKsc";
    src: url("../fonts/NotoSansCJKsc-Black.otf");
    src: local("NotoSansCJKsc Black"), local("NotoSansCJKsc");
}
@primary:#f0c52e;
@balck:#454545;
@white:#f7f7f7;
@backgound:#e8e7e7;
@black:#202020;
@highlight:rgb(255, 64, 129);
@hover:#3498DB;
@gray:fadeout(@black,50%);
@second:fadeout(@primary,10%);

定义min-in、function、公共样式,并修改原生标签样式

.avatar(@width:120px,@border:5px,@border-color:#fff,@margin:0px){
    border: @border solid @border-color;
    color: #eeeeee;
    width: @width; 
    height: @width;
    margin: 5px;
    border-radius:50%;
    margin: @margin !important;
}
.one-line{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
body{
    padding:10px 20px 20px 20px;
    background-color:@backgound;
}

采用嵌套规则对块级元素进行样式定义

.news{
    padding:5px;
    margin-top:10px;
    border-radius:10px;
    .head{
        position:relative;
        .source{
            img.avatar{
                .avatar(50px,2px,0);
            }
            span{
                color:@highlight;
            }
        }
        .title{
            color:@black;
            font-weight:bolder;
            font-size:20px;
        }
        .time{
            position:absolute;
            top:5px;
            right:5px;
            color:@gray;
        }
    }
    .content{
        .cover{
            img{
                max-width:200px;
                max-height:200px;
            }
        }
        .abstract{
            font-size:15px;
            line-height:150%;
        }
    }
    .bar{
        .item{
            width:33%;
            color:@highlight;
            text-align:center;
            &:hover{
                color:@hover;
            }
        }
    }
}

采用媒体查询,定义不同尺寸和设备下的样式

//宽度不超过768px(平板竖屏、手机)
@media screen and (max-width: 768px){
    .body{
        padding-left:0;
        padding-right:0;
    }
    .news{
        padding:3px;
        .head{
            position:relative;
            .source{
                img.avatar{
                    .avatar(30px,2px,0);
                }
            }
            .title{
                font-size:15px;
            }
            .time{
                display:none;
            }
        }
        .content{
            .cover{
                img{
                    max-width:80px;
                    max-height:80px;
                }
            }
        }
    }
}

从交互层(Javascript)上强化responsive的用户体验

在RWD中,Javascript可以为我们识别设备的类型、尺寸和硬件资源,如果需要获取更好的用户体验,可以在不同的设备或尺寸下执行相关的js。比如当宿主为手机浏览器时,可以绑定手势操作等交互事件;在混合式移动端应用(Hybrid APP)中,可以对菜单栏等界面元素进行隐藏;在微信(实际上也属于Hybrid APP)中打开时,可以识别登录用户等。 另外,我们也可以用js做css中的几乎所有事情,只不过这有悖于RWD的思想,而且对于性能的影响比较大。

注意:js代码一般只在两种时候执行:页面加载和事件回调。所以在调试过程中,如果没有监听resize之类的事件,单纯改变屏幕尺寸是无法执行相关js达到改变样式的目的。


有兴趣可以阅读RWD的作者Ethan Marcotte写的一篇文章Responsive Web Design。新手上路,如有错误和没考虑到的地方还请诸位大神指证,望不吝赐教!
最后贴一个之前我开发的一个全响应网站的地址(欢迎吐槽~):http://www.citygee.com/

2条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。