Web全栈技术指南-2.5 移动设备与响应式Web设计 - 书目录

Web全栈技术指南-2.5 移动设备与响应式Web设计

2.5 移动设备与响应式Web设计

什么是、以及为什么需要响应式Web设计

与桌面/笔记本电脑相比,移动设备的显示屏幕比较小,还有各种不同规格,并且可以“横竖”屏转换,因此针对移动设备的浏览器编程必须要考虑网页的屏幕适配问题,即页面的尺寸和布局要与显示设备相匹配。

在这方面有两种不同的解决方案:

  1. Web服务器针对不同的设备提供不同的网页。服务器可以通过HTTP请求的User-Agent头读出移动浏览器的名字、版本和移动设备的有关信息,据此返回合适的页面给请求的客户端。
  2. Web服务器对所有客户端返回相同的网页,由网页自身的代码对各种不同的屏幕尺寸做适配。这种方式又叫做响应式Web设计(Responsive web design)

第一种方式对移动设备浏览器的要求比较低:移动设备不需要具有强大的运算能力,浏览器也不需提供全面的HTML、CSS或JavaScript支持——二十年前的移动设备及其上的浏览器差不多就是这样。这种方式的缺点是:服务器要为同一页面准备多套不同的代码,十分麻烦。

第二种方式是现在比较流行的方式:这得益于移动设备计算能力的提高,以及移动浏览器对HTML等标准的全面支持。

响应式Web设计的实现

响应式Web设计通常依赖CSS的媒体查询(Media queries)功能实现,如下所示:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>响应式边栏</title>
    <style>
      @media (min-width: 640px) {
        #sidebar {
          float: left;
          width: 150px;
        }
        #main {
          margin-left: 150px;
        }
      }
      #sidebar {
        background-color: green;
      }
      #main {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="sidebar">
      边栏
    </div>
    <div id="main">
      正文部分
    </div>
  </body>
</html>

其中,

@media (min-width: 640px) {
  ...
}

就是CSS媒体查询。示例中的这个查询的意思是“当屏幕宽度不小于640px时应用以下规则”。请动手操作一下,看看示例的效果。

类似的媒体查询还有:

@media (max-width: 320px) {
  ...
}

即:当屏幕宽度不大于320px时应用这些规则。或者:

@media (min-width: 320px) and (max-width: 640px) {
  ...
}

表示:当屏幕宽度不小于320px并且不大于640px时应用这些规则。

更多关于CSS媒体查询的信息可参考:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

虽然有了CSS媒体查询这个工具,但要实现理想的响应式Web页面仍不是一件轻易的事。为此我们可以借助一些高级工具,如流行的Bootstrap来实现响应式Web页面。

更多关于响应式Web设计可参考:https://en.wikipedia.org/wiki/Responsive_web_design

更多关于移动浏览器:https://en.wikipedia.org/wiki/Mobile_browser

results matching “

    No results matching “

    134021

     

    转载链接:https://getfullstack.com/web_client/mobile.html