Rem achieves adaptive initial experience and rem adaptive initial experience

Rem achieves adaptive initial experience and rem adaptive initial experience

For the first time, I encountered the first problem when I made a mobile page, that is, the carousel image of the Mobile End. In fact, there are many plug-ins for carousel images, but they are not easy to find if they fully meet the requirements.

Requirements:

1. Achieve Basic touch screen carousel Effects

2. The image with a non-standard proportion can be automatically tiled. (sometimes the image may have a slightly different proportion. Of course, the image in the example can be found at will and cannot be viewed after tiled)

3. the carousel image module is adaptive and displayed according to the fixed aspect ratio, for example, the aspect ratio.

 

I. Initial understanding of rem

So where are the difficulties of this demand? In fact, I need to limit the width and height of the image, but I need to ensure self-adaptation.

If you only consider the former:

.swiper-container {    width: 100%;    height: 100px;}

But the height is fixed. Finally, we decided to use Rem. For details about the relative unit, please visit www.w3cplus.com/css3/define-font-size-with-css3-rem.

In my understanding, rem uses the font-size of the

As long as the font-size of the root element is changed according to the device resolution, the adaptability of each element on the page can be realized.

Now it should be rewritten

.swiper-container {    width: 100%;    height: 5rem;}

Ii. automatically change the font-size of

One solution is to use media queries to set the font-size under the mainstream resolution.

I have referenced the original method in a blog: www.duanliang9?com/learn/web/html5/#.html

 <script>                (function (doc, win) {                var docEl = doc.documentElement,                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',                recalc = function () {                var clientWidth = docEl.clientWidth;                if (!clientWidth) return;                docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';            };            if (!doc.addEventListener) return;            win.addEventListener(resizeEvt, recalc, false);            doc.addEventListener('DOMContentLoaded', recalc, false);            })(document, window);     </script>

By adding such a javascript code, you can dynamically change the font-size Based on the screen width.

According to this sentence docEl. style. fontSize = 20 * (clientWidth/320) + 'px ';

If the iPhone 4 width is 320px, the font-size is 20px, and 100px is 5rem.

If the iPhone 6 is 375px in width, the font-size is 23.4375px, and 100px is 4.267rem.

Iii. automatic conversion of px to rem

So when I write css, do I need to convert it like this? I am not a little prince. Especially when the design is based on iPhone 6

At this time, we will use the sublime text plug-in cssrem to github.com/flashlizi/cssrem.

In this way, you can write in px with peace of mind, and then press enter to convert to rem.

It turns out that the effect is better.

Because it is a company project, I don't want to release it. I hope it will help you a little bit.