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

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="photo.png" srcset="[email protected] 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="[email protected]"
                    required>
                </div>
                <div>
                    <label for="tel">
                        电话
                    </label>
                    <input type="tel" name="tel" id="tel" placeholder="18888888888" required>
                </div>
                <input type="submit" value="注册">
            </form>
        </div>
        <div id="section1">
            <div class="container">
                <h2>
                    我可以学到什么?
                </h2>
                <p>
                    完成课程之后,你可以开发一个高水平的Web App
                </p>
                <p>
                    你可以学到以下几点
                </p>
                <ul>
                    <li>
                        开发一个完美的能在移动设备流量的网站
                    </li>
                    <li>
                        使用各种工具去测试这个网站的表现
                    </li>
                    <li>
                        将这种技术应用到你未来的项目
                    </li>
                </ul>
                <video controls poster="img/product.jpg">
                    <source src="video/product.mp4" type="video/mp4">
                    </source>
                    <source src="video/product.webm" type="video/webm">
                    </source>
                    <p>
                        抱歉!您的浏览器无法播放该视频。
                        <a href="udacity.mov">
                            请点击这里下载。
                        </a>
                        .
                    </p>
                </video>
                <br>
            </div>
        </div>
        <div id="section2">
            <h2>
                指导老师
            </h2>
            <p>
                移动行业领先者
            </p>
            <div id="images">
                <img src="img/p1.jpg" alt="Mp1" srcset="[email protected] 2x">
                <img src="img/p2.jpg" alt="Mp2" srcset="[email protected] 2x">
                <img src="img/p3.jpg" alt="Mp3" srcset="[email protected] 2x">
            </div>
            <br>
        </div>
        <div id="section3">
            <h2>
                我为什么要担心移动设备的反应?
            </h2>
            <p>
                它们太普及了!
            </p>
            <table>
                <caption>
                    <p>
                        数据来自
                        <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">
                            StatsCounter
                        </a>
                    </p>
                </caption>
                <thead>
                    <tr>
                        <th>
                            国家
                        </th>
                        <th>
                            桌面分享
                        </th>
                        <th>
                            平板分享
                        </th>
                        <th>
                            手机分享
                        </th>
                    </tr>
                </thead>
                <colgroup>
                    <col span="1">
                        <col span="1">
                            <col span="1">
                                <col span="1">
                </colgroup>
                <tbody>
                    <tr>
                        <td data-th="Country">
                            <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">
                                印度
                            </a>
                        </td>
                        <td data-th="Desktop share">
                            32%
                        </td>
                        <td data-th="Tablet share">
                            1%
                        </td>
                        <td data-th="Mobile share">
                            67%
                        </td>
                    </tr>
                    <tr>
                        <td data-th="Country">
                            <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">
                                大不列颠
                            </a>
                        </td>
                        <td data-th="Desktop share">
                            69%
                        </td>
                        <td data-th="Tablet share">
                            13%
                        </td>
                        <td data-th="Mobile share">
                            18%
                        </td>
                    </tr>
                    <tr>
                        <td data-th="Country">
                            <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">
                                美国
                            </a>
                        </td>
                        <td data-th="Desktop share">
                            69%
                        </td>
                        <td data-th="Tablet share">
                            9%
                        </td>
                        <td data-th="Mobile share">
                            22%
                        </td>
                    </tr>
                    <tr>
                        <td data-th="Country">
                            <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">
                                中国
                            </a>
                        </td>
                        <td data-th="Desktop share">
                            86%
                        </td>
                        <td data-th="Tablet share">
                            4%
                        </td>
                        <td data-th="Mobile share">
                            10%
                        </td>
                    </tr>
                </tbody>
            </table>
            <br>
        </div>
        <div id="footer">
            <div class="container">
                <p>
                    还是需要脚部信息的~
                </p>
            </div>
        </div>
    </body>

</html>

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

时间: 06-26

谷歌Web中文开发手册:3响应式的相关文章

谷歌Web中文开发手册:1目的&amp;目录

原文:https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/ 你的第一个适应多屏幕的网站 现在有一系列的智能手机和大屏幕显示设备(甚至是电视),所以我们需要学习怎样开发一个可以在这些设备中都表现良好的网站. 多屏幕适应的开发经验并不是那么难.根据这个系列的教程,一起来做一个例子: https://www.udacity.com/course/cs256 CS256 M

谷歌Web中文开发手册:2创建内容和结构

https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/content 内容是所有网站最重要的元素,所以让我们为内容而设计而不是让设计去主宰内容.在这篇教程中,我们首先定义内容,以内容为基础为其创建一个页面结构,然后以简单的线性布局来呈现这些内容,确保它们在窄屏和宽屏中都能正常表现. 创建页面结构 确定我们需要的: 01  一个描述我们的产品""CS256:

谷歌Web中国开发手册:1目的&amp;amp;夹

原版的:https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/ 该网站的第一个多屏幕适配 如今有一系列的智能手机和大屏幕显示设备(甚至是电视),所以我们须要学习如何开发一个能够在这些设备中都表现良好的站点. 多屏幕适应的开发经验并非那么难.依据这个系列的教程.一起来做一个样例: https://www.udacity.com/course/cs256 CS256 Mo

Web设计的未来:响应式设计路在何方?

2014年,通过移动设备上网的人数将超过PC端.在未来,设计移动设备将成为Web开发人员的首要任务. 响应式设计似乎被看做成未来的设计方向,但我不赞同.今天,我要解释为什么我认为响应式设计并不是Web设计的最佳解决方案. 什么是响应式设计? 维基百科对响应式设计是这么介绍的: 响应式Web设计是网站制作使用的一个叠层样式表( CSS3media queries),结合流体网格适应各种布局,还可灵活使用图像.用户可跨越不同设备和浏览器的限制,访问相同内容,布局也利于阅读和浏览,只需细微的调整.平移

PHPExcel中文开发手册翻译版(2)

PHPExcel开发者文档 1.目录2. 4先决条件2.1.软件要求42.2.安装说明42.3.入门42.4.有用的链接和工具42.4.1.的OpenXML / SpreadsheetML中42.4.2.常见问题52.4.3. 6教程3.建筑73.1. 7示意性3.2.延迟加载器73.3.电子表格在内存中73.4.读者和作家73.5.流利的接口84.创建电子表格104.1.该PHPExcel 10级4.1.1.从文件加载10工作簿4.1.2.创建一个新的工作簿104.2.配置设置104.2.1.

web app iphone4 iphone5 iphone6 响应式布局 适配代码

from:http://www.phptext.net/article_view.php?id=387 在满大街的APP,除了游戏,软件图形类的需要用原生开发好点.现在大多还是基于WEBAPP或者混合的hybrid app,大家都知道资讯类的小应用其实网页就可以胜任,当然如果你要调用一些应设备,原生的APP外hybrid app也是一个不错的选择.不过我们今天的主角是WEB APP,WEB APP好处就是,随时随地有网就能看,简单实用.对于开发来说,更是低成本高效率,当然对于追求细致的来说...

阮一峰:自适应网页设计(Responsive Web Design)别名(响应式web设计)

随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通常在600像素以下:PC的屏幕宽度,一般都在1像素以上(目前主流宽度是1366×768),有的还达到了2像素.同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事. 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad

PHPExcel中文开发手册翻译版+应用实例

英文原版在线文档 https://github.com/PHPOffice/PHPExcel/wiki/User%20Documentation%20AutoFilters 英文doc pdf 版本下载 http://phpexcel.codeplex.com/releases/view/119187 2016年8月3日10:26:02 以下是翻译版,基于 1.8.0英文doc版本翻译 如有问题,请反馈楼主 PHPExcel AutoFilter Reference developer docu

浅谈web前端开发

有部分同学和朋友问到过我相关问题.利用周末我就浅浅地谈谈我对web前端开发的理解和体会,仅仅能浅浅谈谈,高手请自己主动跳过本篇文章. 毕竟我如今经验并非非常足,连project师都算不上,更不用说大牛了.今天也不谈技术.技术非常多人比我掌握得更好,也大同小异.可是每一个人的理解体会是不一样的. 对前端开发的三个整体理解和体会 我对前端开发的整体体会有三: 第一:杂而难,难度甚至超过了一般的后台开发,假设有人认为前端开发简单仅仅能说明他还没有入门. 第二:web前端开发正在向响应式和移动端方向大步