REM for adaptive initial experience

For the first time to make a mobile page, the first problem encountered is the carousel on the mobile side. In fact, there are many plug-in charts, but it is not easy to meet the needs of the search.

Demand:

1. Achieve basic touch-screen carousel chart effects

2. Incoming non-standard proportions of the picture, can be automatically tiled (sometimes the picture may be slightly biased, of course, the figure in the example is casually looking, tile can not see it)

3. The Carousel Diagram module can be self-adaptive, according to the fixed aspect ratio display, such as 3:10 aspect ratio

First, the initial knowledge of REM

So where is the difficulty of this demand? In fact, I need to limit the width of the picture, but also to ensure self-adaptation

If only the former is considered:

{    width: 100%;     height: 100px;}

But the height is fixed. Finally decided to use REM This relative unit details can participate in Www.w3cplus.com/css3/define-font-size-with-css3-rem

My understanding of REM is to use the font-size of the

So as long as the font-size of the root element is changed according to the resolution of the device, the self-adaptation of each element in the page can be realized

Then we should rewrite it now.

{    width: 100%;     height: 5rem;}

Second, automatically change the font-size of

One option is to use media queries to set the mainstream resolution of the Font-size

I took a look at the method in a blog post: www.duanliang920.com/learn/web/html5/316.html

<script>                (function(Doc, win) {varDocel =doc.documentelement, Resizeevt= ' Orientationchange 'inchWindow? ' Orientationchange ': ' Resize ', Recalc=function () {                varClientWidth =Docel.clientwidth; if(!clientwidth)return; DocEl.style.fontSize= * (clientwidth/320) + ' px ';            }; if(!doc.addeventlistener)return; Win.addeventlistener (Resizeevt, Recalc,false); Doc.addeventlistener (' domcontentloaded ', Recalc,false);     }) (document, window); </script>

Add such a section of JS, you can dynamically change the width of the screen according to the Font-size

According to this sentence docEl.style.fontSize = (clientwidth/320) + ' px '; Know

iphone4 width is 320px, then Font-size is 20px, 100px is 5rem

Iphone6 width is 375px, then Font-size is 23.4375px,100px is 4.267rem

Iii. automatic conversion of PX to REM

When I write CSS, do I have to convert it again, I am not the little prince of mental arithmetic. Especially when the design was based on Iphone6.

This time with the sublime text plug-in Cssrem Github.com/flashlizi/cssrem

This way you can write to px at peace of mind, then enter into REM.

It turns out that the effect tension pile.

Because it is a company project, will not release, hope to have a little help to everyone

REM for adaptive initial experience