响应式布局 Resposive Web Design

响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

Media Query

Media query breakpoints are pixel values that a developer/designer can define in CSS. When a responsive website reaches those pixel values, a transformation (such as the one detailed above) occurs so that the website offers an optimal user experience.

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Use percentage rather than ‘px’

@media screen and (max-width: 414px) {
    aside {
      float: none;
      width: 100%;
      height: 5%;
      background-color: yellow;
    }
    main {
      height: calc(100vh - 5%);
      background-color: red;
    }
}

Em and Rem

The default font size in browsers is 16px, so 1em=16px，10px=0.625em。To make it easy, we defined Font-size=62.5% in css, then 12px=1.2em, 10px=1em. Thus, if you want to update the normal ‘px’,simply divided by 10 and adding ‘px’.

The diffrence between em and rem is: em is calculated according to parent node, while rem is according to root components, which is html. So, we normally set font-size firstly, then…

html {
    font-size: 10px;
    }
div {
    font-size: 4rem; /* 40px */
    width: 30rem;  /* 300px */
    height: 30rem;
    border: solid 1px black;
}
p {
    font-size: 2rem; /* 20px */
    width: 15rem;
    height: 15rem;
    border: solid 1px red;
}
span {
    font-size: 1.5rem;
    width: 10rem;
    height: 10rem;
    border: solid 1px blue;
    display: block;
} 

Flex Layout

flex box has always been used as one-dimention layout.

flex-direction

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow

// we can combine flex direction and wrape
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content and align-items

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

align-content

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

order

set the order of box

.item {
  order: 1;
}

flex-grow/flex-shrink

When there are more spaces, boxes will get bigger as defined. 0 is default.

.item1{
    // item1 will get  more 1/3
    flex-grow: 1
}
.item2{
    // item2 will get more 2/3
    flex-grow: 2
}

flex-basis

It defines the original size before resizing.We can also use flex-grow, shrink, basis togather.

.item {
    // grow or shrink equally
  flex: 1 1 auto
}

Grid

Grid is a good way for two-dimention layout. We can named every space and lines which is easier to manage.

grid-template-columns/grid-template-rows

It has been divided to 3 * 4, we can set actual space ‘px’,percentage or auto for each.

.container {
    grid-template-columns: 80px auto 100px;
    grid-template-rows: 25% 100px auto 60px;
}
.container {
    grid-template-columns: [line1] 80px [line2] 100px [last-line];
}

// using repeat
.container {
    grid-template-columns: repeat(3,10px)
}

// using fr, it means we divied to 3 equal parts
.container {
    grid-template-columns: repeat(3,1fr)
}

grid-template-areas

we named different areas as following

.container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
        "a a a"
        "b c c"
        "b c c"
        "d d d";
}
// for div
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }

grid-column-gap和grid-row-gap

It defines the margin between item.

.container {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 2fr;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}

minmax

It is really useful when we want to do repositive design. The following means that minimum width is 150, equally divied other space.

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}