全响应式web前端开发

用户1097444

发布于 2022-06-29 17:03:05

1.2K00

代码可运行

文章被收录于专栏：腾讯IMWeb前端团队腾讯IMWeb前端团队

运行总次数：0

代码可运行

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等编译器，可以使用诸如变量定义、minin或函数、语法潜逃、工具函数等功能，提高代码重用度和可维护性。比如采用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/

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2016-07-04，如有侵权请联系 cloudcommunity@tencent.com 删除

css