首页 > 代码库 > 谷歌Web中文开发手册：3响应式

谷歌Web中文开发手册：3响应式

2024-07-07 06:22:30   228人阅读

https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive

（译者注：全部按照教程的代码，并不能实现代码，我调试之后发了全部代码出来。ps：没有使用翻墙工具，谷歌给的例子访问不到。）

每个设备都有自己独特的优势和限制，要让这个网页在众多的不同的显示设备中被接受，作为一名Web开发者，你要尽力让这个页面支持所有设备。

目录：

  • 添加viewport
  • 应用简单样式
  • 设置第一个断点
  • 限制最大宽度的设计
  • 改变间距和文字大小
  • 让元素自适应
  • 小结

前一篇教程已经把页面的基本内容填充好了，这一篇我们会将装饰它，并且让它做一系列不同分辨率的设备中都能够漂亮地显示。


依照移动优先的开发原则，我们从窄屏入手——类似手机——并且先建立起这方面的概念，然后再逐渐向大屏幕扩展。我们可以通过判断视窗宽度来实现不同的设计和布局。

早先我们创建了一对不同级别的设计定义内容如何来显示，现在我们需要页面适应不同的布局。我们需要设置一下断点——用与决定何时改变布局和风格——基于内容如何来适应不同的屏幕分辨率。

使用viewport
从窄屏开始然后逐级扩展
根据断点触发让内容去适应分辨率
根据主要断点创建高级别布局版本

添加viewport

就算是最简单的页面，也要加入viewport标签，它是你开发多设备支持经验的关键。没有它，你的网站是不能在移动设备上有个好的表现的。
引入viewport会让浏览器认为页面需要缩放以适应屏幕。有很多种配置方案，我们默认这样设置：（在<head>里声明一次即可）
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

应用简单样式

我们的产品和公司经常需要一个特别的广告并且支持不同的风格。

风格引导

风格引导能够有效地让访客对页面有一个高层次的认识并且确保你在设计上是统一的。

Colors

#39b1a4

#ffffff

#f5f5f5

#e9e9e9

#dc4d38

  添加装饰图片

在前面的教程中，我们添加了“内容图片”，这些对于描述我们产品很重要。“装饰图片”不是内容所必须要的，但添加之后可以使访客更加关注我们的产品。

举个例子。带图片的标题可以引诱访客去阅读更多关于产品的内容。

可以很简单地应用，我们这里直接使用背景图片。应用一个简单的CSS方式。

 

#headline {
  padding: 0.8em;
  color: white;
  font-family: Roboto, sans-serif;
  background-image: url(backgroundimage.jpg);
  background-size: cover;
}

选择一个简单的“模糊”（虚化）的背景图片可以让文字阅读变得简单。设置background-size : cover;可以保证图片正常的纵横比。


设置第一个断点

现在的设计，在视图宽度达到600px之后就变得有点难看了。我们的想法是，每行的文字长度不要超过10个（最佳阅读长度）。这就是我们接下来想改变的。

【目前的情况是，每行文字的长度会随着视图宽度增加而增加】

 

600px是一个比较好的断点，我们用“媒体查询”的技术来实现。

@media (min-width: 600px) {
}

这样有更大的空间去让页面适应更大的视图窗口。

提示：你不用重新设置所有元素，只要对应做一些调整即可。

我们需要做的：

约束设计的最大宽度；

改变元素的padding属性并且修改字体大小；

让注册表单浮动在标题简介里；

让视频浮动于主体内容；

降低图片大小并且以表格形式展示。

 

约束设计的最大宽度

只有两个主要布局：一个窄视图和一个宽视图，这样可以简化我们的构建过程。

现在我们不想考虑更大宽度的视图会再有不同的布局，让宽度超过800px时，内容样式将不再变化。那可以添加多一个div，放在某模块里面，应用一个margin : auto;让它居中显示。

 

<div id="section1">
      <div class="container">
        <h2>What will I learn?</h2>
 
 
.container {
      margin: auto;
      max-width: 800px;
    }

 

改变元素的padding属性并且修改字体大小

 

在窄视图中，我们没有足够的空间去显示内容，所以只能降低元素大小。

在较大的视图中，我们就得考虑到访客离屏幕较远的情形，所以需要把元素增大，并且加大元素间的距离。

在我们的产品页中，我们让元素和边界保持5%宽度的距离并且增大元素大小，来解决这个问题。

 

#headline {
      padding: 20px 5%;
   }

让元素适应宽视图

窄视图只是简单线性地从上往下排布模块，但宽视图给了我们更多的空间去展示模块内容。在我们产品页中可以这么来做：
让“注册表单”围绕着“简介”；
将“视频”定位到“关键点”的右边；
铺排“图片”；
扩展“表格”。

浮动“表单”

现在我们有更多的空间，那就得打破原有的布局方式，更有效地使用水平上的空间。
#headline #blurb {
      float: left;
      font-weight: 200;
      width: 50%;
      font-size: 18px;
      box-sizing: border-box;
      padding-right: 10px;
    }

    #headline #register {
      float:right;
      padding: 20px;
      width: 50%;
      box-sizing: border-box;
      font-weight: 300;
    }

#headline {
      padding: 20px 5%;
    }

响应式网站

 浮动“视频”

在窄视图中，“视频”宽度是100%，并且排布在“关键点”之后。在宽视图中，这样做会让视频显得太大，失真。

所以“视频”需要在窄视图的垂直流排布中脱离出来，并排与“详情”显示。

 #section1 ul {
      box-sizing: border-box;
      float: left;
      width: 50%;
      padding-right: 1em;
    }
    
    #section1 video {
      width: 50%;
      float: right;
    }

铺排图片

在窄视图中，图片也经常是占满屏幕然后垂直排布的，这在宽视图中肯定是不行的。
为了让图片看起更有条理性，我们将它们宽度设置为30%，并列。然后加点边框看起来吸引人一点。

 #section2 div img {
       width: 30%;
       margin: 1%;
       box-sizing: border-box;
       border-radius: 50% 50%;
       box-shadow: black 0px 0px 5px;
     }

让图片响应

使用图片时，要考虑到当前的视图的像素大小。
这个web建立在96dpi的屏幕。而现在的设备像素密度越来越高，这样的话，原本适合在96dpi显示的图片，在高dpi设备上的显示效果将变得很糟糕。
有一个方法现在还不是经常应用到。如果浏览器支持的话，你可以在高密度像素的窗口对应显示高像素密度的图片。
<img src=http://www.mamicode.com/"photo.png" srcset="photo@2x.png 2x">

表格

表格很难在窄视图中表达，需要用比较特殊的方式。
在窄视图中，我们的表格只有两列，然后随着视图宽度变大而发生变化。
表格响应式
我们要为表格专门设置一个断点。为移动优先原则建表格时，很难去撤销所应用的样式，所以得为窄视图专门的CSS，来灵活处理。
 @media screen and (max-width: 600px) {
      table thead {
        display: none;
      }

      table td {
        display: block;
        position: relative;
        padding-left: 50%;
        padding-top: 13px;
        padding-bottom: 13px;
        text-align: left;
        background: #e9e9e9;
      }

      table td:before {
        content: attr(data-th) " :";
        display: inline-block;
        color: #000000;
        background: #e9e9e9;
        border-right: 2px solid transparent;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 33%;
        max-height: 100%;

        font-size: 16px;
        font-weight: 300;
        padding-left: 13px;
        padding-top: 13px;
      }
    }

小结

恭喜，现在你已经创建了第一个简单的可以适应在不同分辨率设备中的产品页面。
依照下面的提示，你将有个更好的开始：
01 创建一个基础的“信息架构”并且在编码之前理清楚你要表达的内容。
02 一定使用viewport标志
03 创立你基础的移动优先的经验
04 当你有这些经验后，就可以添加更多的断点来适应更多不同宽度的视图。
05 保持迭代
<!doctype html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            CS256: Mobile Web development - structure
        </title>
        <style>
            #headline { padding: 0.8em; background-image: url(img/back.jpg); background-size:
            cover; } #section2 div img { width: 80%; margin: 1%; } @media (min-width:
            600px) { #headline { overflow:hidden; padding: 20px 5%; } #headline #blurb
            { float: left; font-weight: 200; width: 50%; font-size: 18px; box-sizing:
            border-box; padding-right: 10px; } #headline #register { float:right; padding:
            20px; width: 50%; box-sizing: border-box; font-weight: 300; } .container
            { margin: auto; max-width: 800px; } #section1{ overflow:hidden; } #section1
            ul { box-sizing: border-box; float: left; width: 50%; padding-right: 1em;
            } #section1 video { width: 50%; float: right; } #section2 div img { width:
            30%; margin: 1%; box-sizing: border-box; border-radius: 50% 50%; box-shadow:
            black 0px 0px 5px; } } @media screen and (max-width: 600px) { #section3{
            overflow: hidden; } table{ width: 100%; } table thead { display: none;
            } table td { display: block; position: relative; padding-left: 50%; padding-top:
            13px; padding-bottom: 13px; text-align: left; background: #e9e9e9; } table
            td:before { content: attr(data-th) " :"; display: inline-block; color:
            #000000; background: #e9e9e9; border-right: 2px solid transparent; position:
            absolute; top: 0; left: 0; bottom: 0; width: 33%; max-height: 100%; font-size:
            16px; font-weight: 300; padding-left: 13px; padding-top: 13px; } }
        </style>
    </head>
    
    <body>
        <div id="headline">
            <h1>
                移动页面开发
            </h1>
            <h2>
                开发移动页面的经验
            </h2>
            <div id="blurb">
                <p>
                    你已经听说过移动端适应是个大问题，而且你也不知道怎样将传统的桌面网站转换成为一个快速的、有效的多屏幕适应的Web App
                </p>
                <p>
                    做这个教程就是用来教Web开发者关于如何积累这些技术和经验的。
                </p>
                <p>
                    这个教程会首先注重“移动优先”的Web App，要保证先在以下设备中正常表现：
                </p>
                <ul>
                    <li>
                        Android,
                        <li>
                            iOS,
                            <li>
                                and others.
                </ul>
            </div>
            <form method="post" id="register">
                <h2>
                    Register for the launch
                </h2>
                <div>
                    <label for="name">
                        名字
                    </label>
                    <input type="text" name="name" id="name" placeholder="张三" required>
                </div>
                <div>
                    <label for="email">
                        邮箱
                    </label>
                    <input type="email" name="email" id="email" placeholder="neo@example.com"
                    required>
                </div>
                <div>
                    <label for="tel">
                        电话
                    </label>
                    <input type="tel" name="tel" id="tel" placeholder="18888888888" required>
                </div>
                <input type="submit" value=http://www.mamicode.com/"注册">>


联系
我们