(turn) The iphone6 of the H5 page of the mobile terminal

Original address: http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/

Iphone6 and iphone 6 Plus have been out for some time. Many mobile sites, previously written dead body 320px, is now estimated to be busy with the adaptation.

Big screen mobile phone has always been, just before everyone, but the majority of the mobile H5 page to 320px for the base width of the layout, those big screen cock Silk Android users are too lazy to reason, and now the iphone also make a multi-screen, the boss is not the same degree of attention.

Back to the point, the best way to be compatible with iphone versions is adaptive .

1, viewport simple rough way:

1	<metaname="viewport"content="width=320,maximum-scale=1.3,user-scalable=no">

Set the viewport directly to 1.3 times times 320px and enlarge the page 1.3 times times.

Why is it 1.3?

Most of the current pages are 320px-based layouts, while the iphone6 width ratio is 375/320 = 1.171875,iphone6+ is 414/320 = 1.29375
Then the 1.29 times-fold is approximately equal to 1.3.

2. ip6+ CSS Media Query

12345678

@media (min-device-width:   375px 667px ) and (-webkit-min-device-pixel-ratio:   2 " {      /*iphone 6*/ }    @media (Min-device-width:  414px ) and (max-device-width:   736px ) and (-webkit-min-device-pixel-ratio:   3      /*iphone 6 plus*/ }

PS: You can also use the actual device-width directly:device-width : 375px

On the basis of the original page, and then for the corresponding screen size of the individual write style to do the matching.

3. REM Layout

REM is a new unit of CSS3, and the mobile side is highly supported by android2.x+,ios5+.
REM is relative to the root element of the DOM structure to set the size, that is, the HTML element. Compared to EM units, REM is easier to understand and use.

The REM and PX conversions can be viewed at: https://offroadcode.com/prototypes/rem-calculator/

Suppose that HTML we set font-size:12px; This means that 12px is relative to 1rem, then 18px is 18/12 = 1.5rem.

then we set the 320px layout as the benchmark, setting the HTML to font-size:100px, which is 100px = 1rem. (set 100px for ease of calculation) you can change the majority of PX units by 100 directly to REM units.

How does REM do responsive layout?

1. If the ip6+ device is only suitable, then use media query.
The pseudo code is as follows:

123456789101112

/*320px布局*/html{font-size: 100px;}body{font-size: 0.14rem /*实际相当于14px*/}/* iphone 6 */@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){    html{font-size: 117.1875px;}}/* iphone6 plus */@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){    html{font-size: 129.375px;}}

In this way, under IP6, the elements within the page are magnified 1.17 times times, ip6+ is magnified 1.29 times times.

2, if it is fully adaptive, then can be controlled by JS.

1234567891011121314

(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 = 100 * (clientWidth / 320) + ‘px‘;        };    // Abort if browser does not support addEventListener    if (!doc.addEventListener) return;    win.addEventListener(resizeEvt, recalc, false);    doc.addEventListener(‘DOMContentLoaded‘, recalc, false);})(document, window);

When the page is initialized, the font-size is computed and then the Resize event is bound. This effect is the same as the percent layout.

So what are the advantages of using REM to do units and percentages?

The main advantage is the ability to control the element size better. (The general percentage is applied to the layout layer, and the general settings are mostly integers such as 50%,33.3%,25%, which are difficult to use in complex page widgets).
However, compared to the percent layout, it needs to be implemented with JS or media query with a slight flaw.

Demo Address

See the Pen Jojaqw by Hugo (@baofen14787) on Codepen.

4. Adaptive image

Just finished with the REM layout, the same effect can be achieved with a percent layout, but with a percentage layout, you have to face a problem: picture width 100%, there is a high level of collapse when the page loads. .

The image height does not exist by default when the page loads.

You can then use Padding-top to set the percent value for adaptive.

The formula is as follows:

padding-top = (Image Height / Image Width) * 100%

Principle: When the Padding-top value is a percentage, the value is relative to the width.

Related code implementations:

123	<divclass="cover">    <img src="http://g.ald.alicdn.com/bao/uploaded/i1/TB1d6QqGpXXXXbKXXXXXXXXXXXX_!!0-item_pic.jpg_160x160q90.jpg"alt=""/></div>

12	.cover{position: relative; padding-top: 100%; height: 0; overflow: hidden;}.cover img{position: absolute; top: 0; width: 100%;}

Demo address, zoom browser window to see.

See the Pen VEYZGV by Hugo (@baofen14787) on Codepen.

5, Picture HD

As we all know, Iphone6 Plus is 3 times times the HD figure, it's Devicepixelratio = 3. The introduction to DPR can be viewed in this article "device pixel ratio devicepixelratio simple Introduction"

In the iOS8, has started to support the properties of the IMG srcset (currently mobile iOS8 start support), that is, you can set a picture 2 URLs, the browser automatically load the corresponding image.

The level of support is as follows:

Yellow indicates that only the old Srcset specification is supported, and green indicates that the new Srcset specification is supported, including the sizes attribute, and the W descriptor. don't start here, learn more about Google for yourself.

To view the following demo, switch Devicepixelratio values:

See the Pen Ypzoxb by Hugo (@baofen14787) on Codepen.

However, the current front-end picture of the implementation of the basic use of lazyload way to achieve. Srcset image loading method in the actual project is still relatively small.

6, the background map of HD

Media Query for HD

IMG Label HD, you can use JS to determine the value of Devicepixelratio to load different sizes of pictures, but for the background map, written in CSS, with JS to judge a little trouble, fortunately, CSS through media query can also judge DPR.

Currently the best compatibility of the background map HD implementation, using media query to -webkit-min-device-pixel-ratio make judgments:

123456789101112131415161718

/* 普通显示屏(设备像素比例小于等于1)使用1倍的图 */        .css{            background-image: url(img_1x.png);        }        /* 高清显示屏(设备像素比例大于等于2)使用2倍图  */        @media only screen and (-webkit-min-device-pixel-ratio:2){            .css{                background-image: url(img_2x.png);            }        }        /* 高清显示屏(设备像素比例大于等于3)使用3倍图  */        @media only screen and (-webkit-min-device-pixel-ratio:3){            .css{                background-image: url(img_3x.png);            }        }

Further, you can use the tool to generate the corresponding 3x,2x,1x of the picture and CSS, when using the direct reference. Who's got one?

For mobile device -webkit-min-device-pixel-ratio values, you can view the page's grooming: http://bjango.com/articles/min-device-pixel-ratio/

Image-set for HD

Image-set, which is a private property of WebKit and a property of CSS4, is intended to address the image display under the retina screen.

The way of use is also very simple. The pseudo code is as follows:

12345678

.css {            background-image: url(1x.png);    /*不支持image-set的情况下显示*/            background: -webkit-image-set(                    url(1x.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */                    url(2x.png) 2x,/* 支持image-set的浏览器的[2倍Retina屏幕] */                    url(3x.png) 3x/* 支持image-set的浏览器的[3倍Retina屏幕] */            );        }

The current level of support on the mobile side, Ios7+,android 4.4+ has been supported. If you are only doing ip6+ 's HD adaptation scheme. image-setis also an implementation scenario.

What are the differences and benefits of using Image-set with media query implementations?

This article is done in a very detailed elaboration, you can see: http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/

The general meaning is: Image-set does not need to tell the browser what image to use, but directly provides the image to let the browser choose. This means that the browser can choose to load low-resolution images at low speeds. (PS: A good smart look)

However, compared to the implementation of media query, Image-set only supports the HD of a single image and is not suitable for use in CSS sprites. And compatibility is also a big mishap.

But in general, in the logo area, a single picture icon area, is also a good choice.

7, the image list of adaptive

With regard to adaptation, that is, to make the layout more flexible, in the e-commerce website, the product list is a very common structure.

A smarter way to list is to align the two sides and adjust the spacing adaptively.

Then you can use the Flexbox layout to achieve the effect of justification, or you can do it text-align:justify in the same way.

First look at a Flex implementation example, mainly through justify-content:space-between , to achieve:

See the Pen Ypzolm by Hugo (@baofen14787) on Codepen.

Flexbox layout Way, on the PC side is not appropriate, IE9 below are not supported, then the more friendly way can be used text-align:justify to achieve, compatible with major mainstream browsers, including IE6.

For details, please visit my previous blog post: "Inline-block + Justify implementation list Justification"

Small Demo:

See the Pen RANZKP by Hugo (@baofen14787) on Codepen.

However, there are some limitations in these 2 layout methods. Is that the number of lists must be rounded up. There is no one can be compatible with an unlimited number of implementation options, if you crossing have a better way to achieve, also welcome the proposed, Exchange.

Summarize

Mobile IP6 Adaptation Scheme has many, there is no fixed routines and methods, according to the characteristics of their own business, choose some of the methods used in combination.

(GO) Iphone6 of the H5 page of the mobile terminal