At present, many APP designers have started to switch to H5 front-end development, but solving the adaptation of all iPhone and Android models is our top priority. Whether designing APP or writing front-end H5, we should consider the compatibility of mobile terminal.
Viewport simple and crude:
<meta name="viewport" content="Width = 320, maximum - scale = 1.3, user - scalable = no">
Copy the codeDirectly set the viewPort to 1.3 times 320px to enlarge the page 1.3 times.
Why 1.3?
Currently, most pages are based on 320px layout, while the width ratio of the iphone6 is 375/320 = 1.171875, and that of the iphone6+ is 414/320 = 1.29375, so 1.29 times is about 1.3.
Ip6 + CSS Media Query
@media (min-device-width : 375px) and (max-device-width : 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*/
}
Copy the codeDevice-width: 375px
On the basis of the original page, and then for the corresponding screen size separate style adaptation.
REM layout
REM is a new unit in CSS3, and it has high support on mobile, android2.x+, ios5+. REM is set to size relative to the root element of the DOM structure, the HTML element. Rem is easier to understand and use than EM units.
REM and PX conversion can view the url: offroadcode.com/prototypes/…
Font :12px; So 12px is 1rem, so 18px is 18/12 is 1.5rem.
Font size:100px, 100px = 1rem, based on the 320px layout. You can change it to REM units by dividing most of the px units by 100.
How does REM do responsive layout?
- If only for IP6 + devices, use Media Query.
The pseudocode is as follows:
/ * * / 320 px layout
html{font-size: 100px; }body{font-size: 0.14 rem /* The actual equivalent of 14px*/}
/* iphone 6 */
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2) {html{font-size: 117.1875 px.;}
}
/* iphone6 plus */
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3) {html{font-size: 129.375 px.;}
}
Copy the codeIn this way, in IP6, the page element is 1.17 times larger, ip6+ is 1.29 times larger.
- If it is completely adaptive, it can be controlled through JS.
(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);
Copy the codeFont size is computed during page initialization and the resize event is bound. The effect is the same as a percentage layout.
So what’s the advantage of using REM versus percent?
The main advantage is greater control over element size. Percentages are generally applied at the layout level, and integers such as 50%, 33.3%, and 25% are common and difficult to use in complex page widgets. However, compared to the percentage layout, which requires JS or Media Query implementation, it is slightly flawed.
The DEMO address
Image adaptation
Just say REM layout, you can achieve the same effect with percentage layout, but with percentage layout, you have to face the problem that the image width is 100%, and the height of the page will collapse when loading. .
Figure: The image height does not exist by default when the page loads.
You can use the padding-top to set the percentage value to be adaptive.
The formula is as follows:
padding-top = (Image Height / Image Width) * 100%
How it works: When the padding-top value is a percentage, the value is relative to the width.
Related code implementation:
<div class="cover">
<img src="http://g.ald.alicdn.com/bao/uploaded/i1/TB1d6QqGpXXXXbKXXXXXXXXXXXX_!! 0-item_pic.jpg_160x160q90.jpg" alt=""/>
</div>
Copy the code.cover{position: relative; padding-top: 100%; height: 0; overflow: hidden; }.cover img{position: absolute; top: 0; width: 100%; }Copy the codeDEMO address, zoom in the browser window to see.
Picture in HIGH definition
As everyone knows, the iphone6 plus is 3x hd, and its devicePixelRatio = 3.
For an introduction to DPR, check out the article devicePixelRatio
Img srcset is now supported in ios8, which means you can set 2 urls to an image and the browser will automatically load the corresponding image.
Support levels are as follows:
Yellow indicates that only the old SRCSET specification is supported, and green indicates that the new SRCSET specification is supported, including sizes attribute, w descriptor. Here is not expanded, detailed information can be Google.
Please switch the devicePixelRatio value to view the following DEMO: devicePixelRatio devicePixelRatio introduction
But at present, the front end of the picture is basically implemented in the way of Lazyload. Srcset image loading method is seldom used in actual projects.
Background image in HIGH definition
Media Query implements HIGH definition
Img tag in high definition, you can use JS to determine the value of devicePixelRatio to load images of different sizes, but for background images, written in CSS, using JS to determine the trouble, fortunately CSS can also determine DPR through media Query.
At present, the most compatible background image hd implementation method is determined by media Query’s -webkit-min-device-Pixel-ratio:
/* Normal display (device pixel ratio is less than or equal to 1) use 1 times the figure */
.css{
background-image: url(img_1x.png);
}
/* Hd display (device pixel ratio is greater than or equal to 2) uses 2x image */
@media only screen and (-webkit-min-device-pixel-ratio:2) {.css{
background-image: url(img_2x.png); }}/* Hd display (device pixel ratio is greater than or equal to 3) use 3x image */
@media only screen and (-webkit-min-device-pixel-ratio:3) {.css{
background-image: url(img_3x.png); }}Copy the codeFurther, you can use the tool to generate corresponding 3x, 2x, 1x images and CSS, which can be directly referenced when using. Who gets one?
-webkit-min-device-pixel-ratio for mobile devices
Image-set implements HIGH definition
Image-set, which is a private Webkit property and a Css4 property, was developed for Retina display of images.
It’s easy to use. The pseudocode is as follows:
.css {
background-image: url(1x.png); /* if image-set is not supported */
background: -webkit-image-set(
url(1x.png) 1x,/* Under [normal screen] of a browser that supports image-set */
url(2x.png) 2x,/* Image-set for [2x Retina screen] */
url(3x.png) 3x/* Image-set support for [3x Retina screen] */
);
}
Copy the codeThe current level of mobile support, ios7+, android 4.4+ is already supported. If only do IP6 + hd adaptation scheme. Image-set is also an implementation.
What are the differences and benefits of using image-set versus Media Query implementations?
This article made a very detailed, you can see: blog.cloudfour.com/safari-6-an…
The image-set does not need to tell the browser what image to use, but instead provides the image for the browser to choose from. This means that browsers can choose to load low-resolution images at low Internet speeds. (PS: The appearance of good intelligence)
However, compared with the implementation of media Query, image-set only supports the high-definition of a single image, which is not suitable for use in CSS Sprite. Compatibility is also a big problem.
In general, it is also a good choice to use in the LOGO area, under the area of a single image icon.
As for picture list adaptation, that is, to make the layout more flexible, in e-commerce sites, the list of goods is a very common structure. A smart way to make lists is to align the ends with adaptive spacing.
This can be done using FLEXBOX layout or text-align:justify.