About responsive web design

手机网站+电脑网站+平版网站 = 响应式网站

In the absence of adequate funding with the energy to do a mobile site, responsive website is a good choice.
It has the following advantages:

Reduce the workload (as long as a website code, only need to change js aspects and it)
Save time (each device are taken into account, but also search-friendly)

The first is the [<meta>][1]setting:
the majority of the phone's browser kernel is living in webkit core, and most browsers support the use of viewport metaelements to override the default canvas scaling. So we can be headinserted in a metaset of specific width or scaling.

<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width = width of the device-width browser page is equal to the width of the device, user-scalable = no, static scaling, if 1.0 is: browser page mounted viewport size to render the page, the maximum maximum-scale minimum-scale minimum zoom page to several times the width of the device.

<meta http-equiv="X-UA-Compatible" content="ie=edge">

For some settings IE browser, because css3 is responsive key technologies, but IE browser support is limited, so the appeal of code mean is:
tell the IE browser, version IE8 / 9 and beyond will be the highest version of IE to render page. This may be related specifically to refer to this blog
set viewport meta tag after the page is not scaled, we can correct for different viewport width according css3 media queries
csss3 media queries


@media only screen and (max-width:30em){};
@media only screen and (max-width:50em){};
@media only screen and (min-width:30em) and (max-width:50em){};
@media print{}//打印样式

The maximum width is 50em write styles in 30em <the same effect width <50em, so do not rewritable
percentage layout and rem em
using a percentage layout to create a flow of an elastic interface:
that is, the element fixed size is converted to the relative size, the formula : percentage width = width / context elements of the target element, a reference from the book "Web watertight design."
When the elements are wrapped borderwhen, if we are not borderdepending on the context will be wider or narrower, you may be subtracted package elements on both sides of border, and then use the formula.
Similarly, padding-left,padding-rightas well as margin-right，margin-leftthe size is the same reason.
Then the page is the size of the font.
em is opposite context, rem (root em) is opposed html root element,

{
font-size:16px;
font-size:1em;//这三个值效果是相等的效果。
font-size:100%;
}


html{
font-size: 16px;
}
.parent{
font-size: 2px;
}
.son{
font-size: 2em;//son下的字体大小是4px;
}


html{
font-size: 16px;
}
.parent{
font-size: 1rem;//16px;
}
.son{
font-size: 2rem;//32px;
}

//我见一些前辈大都這样设置,我知道后也比较喜欢這个，
//因为不会像em那样产生嵌套混乱的问题，也可以很方便的设置24，28這样数值。
html{
font-size: 62.5%;//也就是(10/16)*100%;
}
.parent{
font-size: 2.4rem;//24px;
}
.son{
font-size:1rem;//10px;
}

Elastic Pictures

img{
max-width:100%;//自动缩放到与容器100%匹配
}
.side img{
max-width:50%;//特定的某个样式
}
但是这种会导致图片在视口很大的时候被拉长，所以可以這样
.side img{
    width: 30%;
    max-width:100px;
}

Responsive image (match the device to load images)

<img class="image" src="a.jpg"
     srcset="480px.jpg 128w, 680px.jpg 256w, 890px.jpg 512w"
     sizes="(max-width: 360px) 340px, 128px">
     //srcset用来指向提供的图片资源,sizes用来表示尺寸临界点，响应响应式布局
<picture>
  <source srcset="1.png" media="(min-width: 400px)">
  <source srcset="2.png" media="(min-width: 800px)">
<img src="a.png" alt="pic">
</picture>
//IE均不支持，不过Edg兼容模式支持
<picture>
  <source srcset="a.svg" type="image/svg+xml">
  <img src="b.png" alt="pic">
</picture>

There is to listen window.resize js before the event, as well as svg, I'm not familiar svg, not to say.
In fact, responsive images which also relates to the physical pixels, logical pixel, dpi, etc., but I think the new scheme which does not require us to write 1x 2x that I wrote before, because I only know about this -
I hope next time can fill point, if there is an error, please correct me -

Guess you like