Mobile-responsive layout +rem+calc ()

1. Media query:@media only Screen and (max-width:) {}, when initially doing the PC side, use a variety of media queries, because the PC has a total number of screens, not too cumbersome to reuse the class name. There is a big drawback is that the UI gives the design of the width is certain, in the response to the feeling is a super uncomfortable aesthetic tangle.

2. Percent: Percent is also quite troublesome, but also to go to various calculations, not the programmer should do cumbersome things.

3.em: The defect is the percentage of the parent box.

I explored a shortcut that I chose to take, without worrying about the width and height of the scale, or worrying about the layout at each resolution.

first, we need to understand the properties that Calc will calculate in Rem,style, and the new VW unit. Here to Baidu to understand. But found that there is a pit, calc () parameters can be mixed with PX and VW, but tried, give up.            

<style>

html{

Font-size:calc (50px * 100vw/640px); When the design manuscript is 640px wide, the font-size is 50px, but the discovery is not effective. So modify the following:
}

</style>

Send the Code:<style>

html{

Font-size:calc (100VW * 50/640); When the design manuscript is 640px wide, the font-size is 50px, and when the screen width is changed, the layout adapts, regardless of the proportional response of the width and height.
}

</style>

Mobile-responsive layout +rem+calc ()