响应式网站实战

作者: 一俢 | 来源:发表于2019-02-02 08:29 被阅读43次

随着互联网技术的发展,网络终端越来越丰富,从最早的桌面设备到现在丰富的桌面+平板+手机端,为了适应各种不同的屏幕,但是在各个端都开发各自不同的站点会让开发资源大大的浪费,可复用性及差,这样一来响应式的网站设计应用而生。那么如何才能做到响应式,如何才能让同样的代码在不用设备上都有更好的交互体验呢?让我们看看具体如何实践:

  • 屏幕尺寸定义
  • 媒体查询
  • 栅格系统
  • 响应式字体
  • 响应式尺寸
  • 响应式组件

屏幕尺寸定义

首先,我们要定义好什么样的尺寸是桌面端、什么样的尺寸是平板、什么样的尺寸是手机端,我们需要参考大量的数据来做一个权衡的定义,结果如下表:

设备 屏幕大小 描述
手机 < 568px
大手机 ≥ 568px
平板 ≥ 768px
桌面 ≥ 1024px
大桌面 ≥ 1280px

参考:https://material.io/devices/

这样一来,我们可以通过在不同的尺寸下设置不同的样式来达到响应式的效果,但是这种变化是需要有一定的规则的,不然在管理和维护上是灾难。

媒体查询

CSS3 加入了媒体查询功能,让样式可以识别不同的设备甚至是屏幕大小,有了这一功能后,让我们应对不同屏幕样式的问题上也变得简单起来。

以下是一个简单的媒体查询样式写法,它可以让 <body> 标签下的字体在屏幕宽度在 568px 以下的设备字体只有 14px,而超过 568px 的屏幕字体大小为 16px。由此一来,字体会随着屏幕的大小而变化:

body {
    font-size: 16px;
}

@media screen and (max-width: 568px) {
    body {
        font-size: 14px;
    }
}

更多媒体查询的相关知识可以查看:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

有了媒体查询后,我们可以在前面定义好的尺寸中编写适合屏幕大小的响应式 CSS。

关键词 CSS 媒体查询 适用于 Class
- - 所有 .*
xs @media screen and (max-width: 35.4em) < 568px 暂无
sm @media screen and (min-width: 35.5em) ≥ 568px .*-sm
md @media screen and (min-width: 48em) ≥ 768px .*-md
lg @media screen and (min-width: 64em) ≥ 1024px .*-lg
xl @media screen and (min-width: 80em) ≥ 1280px .*-xl

栅格系统

栅格系统是解决响应式布局的一套样式系统,通常有这样几种类型的栅格系统:10 等份、12 等份、24 等份,实现方式主要有两种:百分比和 flex,在 CSS3 普及不大的年代通常采用百分比,现在绝大多数现代浏览器已经支持 flex 布局,推荐使用。

UI 必须在栅格系统中设计并符合栅格系统的规则,整体布局内的组件也需要符合栅格系统的规范。这样一来布局都会随着屏幕大小而调整,并且保证不同尺寸的最佳体验。

以下是 pure 框架的使用方式,其他响应式样式框架也差不多:

基本用法

<div class="pure-g">
    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>
</div>

响应式栅格

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>

有间隙的栅格

<div class="pure-g pure-g-span-1-24">
    <div class="pure-u-1 pure-u-md-1-3">
        <div class="pure-span-1-24"> ... </div>
    </div>
    <div class="pure-u-1 pure-u-md-1-3">
        <div class="pure-span-1-24"> ... </div>
    </div>
    <div class="pure-u-1 pure-u-md-1-3">
        <div class="pure-span-1-24"> ... </div>
    </div>
</div>

有偏移量的栅格

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3">
        <div class="offset-1-24"> ... </div>
    </div>
    <div class="pure-u-1 pure-u-md-1-3">
        <div class="offset-1-24"> ... </div>
    </div>
    <div class="pure-u-1 pure-u-md-1-3">
        <div class="offset-1-24"> ... </div>
    </div>
</div>

响应式字体

对于字体的解决方案,我们也有一套规则:

  • px:字体在任何设备上大小都保持一致,此时用 px
    • 正文
    • 注释、解释
  • rem:字体在不同设备上大小不一样时,采用 rem,rem 在每个不同的屏幕大小之间的换算关系参考下表
    • 标题

rem 在不同设备下的对应关系表

关键词 屏幕大小 rem = px
xs < 568px 1rem = 8px
sm ≥ 568px 1rem = 8px
md ≥ 768px 1rem = 10px
lg ≥ 1024px 1rem = 12px
xl ≥ 1280px 1rem = 12px

响应式尺寸

同: 响应式字体

响应式组件

当然对于非常特殊的组件,我们需要特殊对待,它们在桌面端和移动端相差太大,我们要采用组件的方式将复杂的逻辑封装进去,对外暴露相同的接口,让使用者在业务开发中不用考虑多个屏幕的适配问题:

  • 图片浏览组件
  • 对话框
  • 导航
  • 表单
  • ...

响应式设计九大原则

以下是响应式设计所遵循的 9 大原则,我们会在以后的文章中一一介绍

  • 响应式 vs 自适应网页设计
  • 内容流动
  • 相对单位
  • 断点
  • 最大值和最小值
  • 嵌套对象
  • Mobile 优先,还是 Desktop 优先
  • 网页字体 vs 系统字体
  • 位图 vs 矢量图

参考:http://blog.froont.com/9-basic-principles-of-responsive-web-design/

总结

响应式设计并不是一件非常困难的事情,需要我们定义好规则,让开发和设计都遵循这一规则,化繁为简,让开发更佳高效。

相关文章

  • 响应式网站实战

    随着互联网技术的发展,网络终端越来越丰富,从最早的桌面设备到现在丰富的桌面+平板+手机端,为了适应各种不同的屏幕,...

  • 聊一聊搭建高质量响应式网站有哪些技巧?

    企业高质量的H5响应式网站如何建设?H5响应式网站怎么制作用户体验感更高?现在响应式网站非常流行,因为响应式的网站...

  • Rem

    响应式实战笔记--4、Rem 响应式手机网站,一定要能根据手机尺寸的大小比例,去自适应网页,也就是宽、高一起动态改...

  • 响应式网站开发实战

    效果图 动图显示太慢,点击这里查看 github源码下载:https://github.com/xiaoe1314...

  • 响应式开发

    响应式开发 响应式网站设计 -----Ethan Marcotte 第一章 响应式网站设计的三大技术成分 流动网格...

  • nodejs学习收藏

    1、Node - 从0基础到实战企业官网 2、node.js+layui+bootstrap快速开发响应式企业网站...

  • 响应式网站建设有哪几种布局类型?

    响应式网站建设有哪几种布局类型?响应式的网站设计已经成为一种主流,无论是出于不同设备需要还是用户需求,响应式网站都...

  • SiteServer CMS 如何实现响应式网站---实践篇

    上一篇SiteServer CMS 如何实现响应式网站---原理篇主要讲响应式网站的发展历程以及原理,重点讲解响应...

  • 响应式网站

    概念 弹性网格布局,弹性图片,媒体查询 优点 1.减少工作量网站、设计、代码、内容都只需要一份多出来的工作量只是j...

  • 响应式网站

    1,国外响应式网站收录 https://mediaqueri.es/ 2, 媒体查询:总结,max === 小于;...

网友评论

    本文标题:响应式网站实战

    本文链接:https://www.haomeiwen.com/subject/dvzjsqtx.html