響應式網站設計基礎

時間 2019-11-09

原文原文鏈接

Why responsive

調試

Starting small

像素css

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.html
viewportios
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Using the viewport meta tag to control layout on mobile browsersgit

元素的最大寬度github

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

tap targetweb
```
{ 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.chrome

CSS 屬性詳細列表canvas

start small

Building Up

媒體查詢 media querywindows
- 添加基本媒體查詢
  - 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.
- 複雜媒體查詢
  
  媒體查詢app
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