响应式网站设计基础

Why responsive

• 调试
  • https://www.browserstack.com/
  • 在装有 Chrome 的 Android 上远程调试
  • iOS WebKit 调试代理
  • Testing Mobile: Emulators, Simulators And Remote Debugging

Starting small

• 像素

  Instead of reporting the width in the number of physical hardware pixels,the browser reports the width in the number of DIPs, or device independent pixels. As its name implies, a device independent pixel is a unit of measurement, that actually relates pixels to a real distance. The idea being that a device independent pixel will take up the same amount of space on a display regardless of the pixel density of the display.

• viewport

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  Using the viewport meta tag to control layout on mobile browsers

• 元素的最大宽度

  img, embed, object, video {
      max-width: 100%;
  }

• tap target

  {
      min-width: 48px;
      min-height:48px;
      /*
      padding: 1.5em [inherit];
      */
      /*
      Simply using width and height, it won't allow the element to resize if the content inside of it is bigger than the container.
      */
  }

  Tap targets or anything that a user might touch tap ,click or try and do input on, need to big enough and easy to hit. And spaced so that you're not going to accidentally hit two at the same time. But our fingers are about ten millimeters wide, or half an inch, which works out to be about 40 CSS pixels. So buttons should be at least 40 by 40 pixels. instead of doing 40 by 40, you should make them 48 pixels wide by 48 pixels tall. That makes sure that there's enough room between the elements. It's okay to make some tap targets a little bit smaller. But make sure there's at least 40 pixels of room between any of your top targets, to make sure that users don't hit two buttons or two elements at the same time or miss it completely.

CSS 属性详细列表

• start small

Building Up

• 媒体查询 media query

  • 添加基本媒体查询
    • using the media attribute on a linked style sheet

      <link rel="stylesheet" href="style.css" media="screen and (min-width: 500px)">

    • embed them with a @media tag

      @media screen and (min-width: 500px) {
          
      }

    • embed them with an @import tag

      @import url("style.css") only screen and (min-width: 500px);
      /*
      for perfomance reasons, avoid @import
      */

    • with linked css, you've got many small files, but many HTTP requests, where as with @media, you've got fewer requests, but the files tend to be a little bit bigger.
    • Any filter that meets the criteria of the resulting CSS block, will be applied using the standard CSS rules of precedence.
  • The media queries used most often for responsive web design are, min-width, and max-width. Max-width rules are applied any time the viewport width, is less than the value specified. It's also possible to create queries based on min device width, or max device width, but this is strongly discouraged. The difference is subtle, but very important. Min width, is based on the size of the browser window. Where as min device width, is based on the size of the screen. In addition using device width, can prevent content from adapting on desktops or other devices that allow the windows to be resized. Because the query is based on the actual device size, not the browser window.The other reason some browsers, may report the wrong value.
  • 复杂媒体查询

    媒体查询

• Break Points

  the point at which the page changes layout, is called a break point.

• 网格 the grid fluid system

• Flexbox

  Flexbox, is one of the most powerful tools that you can use for layout. It's changed a lot in the last couple years, but at this point, it's hit candidate recommendation and it's supported by most browsers. For production, I want you to make sure that you're including all of the vendor prefixed version. So that way, if anybody's on an older browser,you're not leaving them out in the cold. The reason Flexbox is so powerful. Is its ability to fillthe space available. If an element has extra room around it, it'll expand to fit or if it's getting crowded elements will shrink, so that they take up aslittle space as possible.

  diplay: flex;
  flex-wrap: wrap;
  order: number;

Common Responsive Patterns 常见响应模式

Most patterns used by responsive web pages can be categorized into one of four patterns, mostly fluid, column drop, layout shifter, and off canvas. In some cases, a page may use a combination of patterns.

• column drop 掉落列模型

  Column drop is probably the easiest. At its narrowest viewport, each element simply stacks vertically, one on top of the other. As things get wider, the elements expand, until the first break point is hit. At the first break point, instead of having all the elements stacked, two elements are now side by side. And the third element is underneath. The elements keep expanding as the viewport gets wider until the next break point is hit. And then, things reflow to a three-column layout. Generally, once the viewport hits a maximum width, the columns hit a maximum size, and instead of getting wider, margins are added to the left and right.

  .container {
      display: flex;
      flex-wrap: wrap;
  }
  div {
      width: 100%;
  }
  
  @media screen and (min-width: px) {
      
  }

• mostly fluid 大体流动模型

  The mostly fluid pattern, is very similar to column drop, but it tends to be a bit more grid like. With more columns and columns fitting in different ways, depending on the viewport width. Just like column drop at its narrowest viewport, the layout is stacked but as the layout gets wider, the grid pattern starts to appear. And eventually, once the layout hits its widest viewport, margins are added on the left and right, instead of expanding things out.

• layout shifter 布局切换器

  The layout shifter pattern is probably the most responsive pattern with multiple break points across several different screen widths, but the key to this layout is the way that content moves about instead of reflowing and dropping below other columns. Flex box really shines here, because we can use the order CSS attribute.

  .container {
      width: 100%;
  }

• off canvas 画布之外

  With off canvas, instead of stacking content vertically, the off canvas places less frequently used content, for example navigation or app menus, off screen, only showing them if the screen is large enough. On smaller screens, the off canvas content is typically shown when the user taps on the hamburger icon.

  html, body, main {
      height: 100%;
      width: 100%;
  }
  nav {
      width: 300px;
      position: absolute;
      /* This trasform moves the drawer off canvas. */
      -webkit-transform: translate(-300px, 0);
      transform: translate(-300px, 0);
      /* Optionally, we animate the drawer. */
      transition: transform 0.3s ease;
  }
  nav.open {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
  }
  
  @media screen and (min-width:600px) {
      nav {
          position: relative;
          transform: translate(0, 0);
      }
      body {
          display: flex;
          flex-flow: row nowrap;
      }
      main {
          width: auto;
          flex-grow: 1;/*allows the element to grow and take up the full remaining width of the viewport*/
      }
  }

  /*
  用于切换 open 类的 JavaScript：
  */
  menu.addEventListener('click', function(e) {
  drawer.classList.toggle('open');
  e.stopPropagation();
  });

  事件和事件传播

图标

• http://unicode-table.com/en/2630
• https://fortawesome.github.io/Font-Awesome/icon/bars

Optimizations 优化

• 响应式表格

  • hidden columns

  Hidden columns essentially hides columns based on their importance as the viewports size gets smaller. The biggest problem of hidden columns is that you're hiding content from the user. So use this technique with caution. And if possible, use abbreviated data instead of hiding it completely.

  display:none 与 visibility: hidden

  • no more tables

  With the no more tables technique, below a certain viewport width, the table is collapsed and resembles a long list, as opposed to a table data. The nice thing about this technique is all of the data is visible no matter what the size of the viewport is.

  table {
      border: 1px solid #ddd;
    }
    tr:nth-child(odd) {
      background-color: #f9f9f9;
    }
    @media screen and (max-width: 500px) {
      table, thead, tbody, th, td, tr {
        display: block;
      }
      thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }
      td { 
        position: relative;
        padding-left: 50%; 
      }
      
      td:before { 
        position: absolute;
        left: 6px;
        content: attr(data-th);
        font-weight: bold;
      }
      td:first-of-type {
        font-weight: bold;
      }
    }

  Responsive Data Table Roundup

  • contained tables

  One of the easiest things you can do, to contain the table in the view port. Is to wrap it in a div. And set the width to 100%. And overflow x to auto. Then, instead of breaking out of the view port. The table will instead, take up the same width. But will scroll within the view port.

  td {
      min-width: 75px;
      text-align: center;
    }
    th:first-of-type {
      min-width: 125px;
    }
    div {
      width: 50%;
      overflow-x: auto;
    }

• fonts 字体

  • line length: 65 characters
  • base font: 16px
  • line-height: 1.2em

• minor breakpoints

如何添加省略号