Home > Article > Web Front-end > What is responsive layout? Implementation of html responsive layout

What is responsive layout? Implementation of html responsive layout

不言Original: 2018-08-06 16:31:427645browse

This article brings you the content about what is responsive layout? The implementation of html responsive layout has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Step one: Add a line of viewport meta tags at the head of the web page code

(1)viewport is the default width and height of the web page. The meaning of the above line of code is : The width of the web page is equal to the screen width by default (width=device-width), and the original scaling ratio (initial-scale=1) is 1.0, that is, the initial size of the web page occupies 100% of the screen area.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

All major browsers support this setting, including IE9. For those older browsers (mainly IE6, 7, 8), you need to use css3-mediaqueries.js.

<!--[if lt IE 9]> 　　　 　
    <script src="http://css3-mediaqueries- js.googlecode.com/svn/trunk/css3-mediaqueries.js">
    </script> 
<![endif]-->

(2) X-UA-Compatible

X-UA-Compatible is a newly added setting since IE8 and is not recognized by browsers below IE8. By setting the value of X-UA-Compatible in meta, you can specify the compatibility mode settings of the web page.

#IE browser, regardless of whether a DTD is used to declare the document standard, IE8/9 will use the IE7 engine to render the page.

<meta http-equiv="X-UA-Compatible" content="IE=7">

#IE browser, IE8/9 will use the IE8 engine to render the page.

<meta http-equiv="X-UA-Compatible" content="IE=8">

#IE browser, IE8/9 and later versions will use the highest version of IE to render the page.

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">

#IE=edge tells IE to use the latest engine to render web pages, and chrome=1 can activate Chrome Frame.

The chrome=1 here does not mean that IE's technology has been enhanced to simulate the Chrome browser, but is related to the Google Chrome Frame (Google Embedded Browser Framework GCF) developed by Google. This plug-in can keep the appearance of the user's IE browser unchanged, but the user is actually using the Chrome kernel when browsing the web, and supports IE6/7/8 on Windows XP and above.

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

Step 2: Fluid Layout

The position of each block in the page is floating, not fixed. If the width is too small, two elements cannot be placed, and the following The element will automatically scroll to the bottom of the previous element and will not overflow in the horizontal direction, avoiding the appearance of the horizontal scroll bar

.left{ width:30%; float:left}
.right{ width:70%; float:right;}

Step 3: CSS @media rules, selective loading of CSS

@media screen and (max-device-width: 400px) {  .left{ float:none;} }

When the screen is smaller than 400, left cancels the floating.

The core of "adaptive web design" is the Media Query module introduced by CSS3. Automatically detect the screen width and then load the corresponding CSS file. If the screen width is less than 600 pixels (max-device-width: 600px), load the css600.css file. If the screen width is between 600 pixels and 980 pixels, the css600-980.css file is loaded.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />

In addition to loading CSS files with html tags, you can also load them in existing CSS files

@import url("css600.css") screen and (max-device-width: 600px);

Step 4: Do not use absolute width, font size

(1 ) width:auto; / width:XX%;

(2) The font size is 100% of the default size of the page, which is 16 pixels. Do not use the absolute size "PX" for the font, but use the relative size "REM"

html{font-size:62.5%;} body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem;

Step 5: Adaptation of the image

"Adaptive web design" must also implement automatic scaling of the image .

img, object {max-width: 100%;}

The old version of IE does not support max-width, so it has to be written as:

img {width: 100%;}

When scaling images on the windows platform, image distortion may occur. At this time, you can try to use IE's proprietary command

img { width:100%; -ms-interpolation-mode: bicubic;}

or use js--imgSizer.js

addLoadEvent(function() { 　　　　
        var imgs = document.getElementById("content").getElementsByTagName("img"); 　　　　      
        imgSizer.collate(imgs); 　　
});