CSS Adaptive Web page (CSS first article)

? Properties of CSS:

Use the browser's own review elements to adjust some of the pages, shortcut keys are F12.

Web pages allow width adaptation:

Add a row of viewport meta tags to the header of the code.

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

This setting is supported by all major browsers, including IE9. For those older browsers (mostly IE6, 7, 8), you need to use Css3-mediaqueries.js.

CSS code that automatically adapts to the screen width of the Web page:

<!--[if It ie9]>

<scrript src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" >

</script>

<! [endif]-->

The page adjusts the layout according to the screen, cannot use the absolute width layout, the CSS code cannot specify the pixel width: width:xxx px;

Only percent width can be specified: width:xx%; or Width:auto;

Font of relative size:

The font also cannot use absolute size (px), but only relative size (EM).

Body {

Font:normal 100% Helvetica, Arial, Sans-serif;

}

V. Flow layout (fluid grid)

The meaning of "flow layout" is that the positions of each block are floating, not fixed.

. Main {

Float:right;

width:70%;

}

. leftbar {

Float:left;

width:25%;

}

The advantage of float is that if the width is too small to fit two elements, the following elements will automatically scroll to the bottom of the preceding element without overflow (overflow) horizontally, avoiding the appearance of the horizontal scroll bar.

In addition, the use of absolute positioning (Position:absolute) should also be very careful.

Vi. Choosing to load CSS

The core of "adaptive web Design" is the media query module introduced by CSS3.

It means that the screen width is automatically detected and then the corresponding CSS file is loaded.

CSS code for Web pages to automatically adapt to screen width 2

<link rel= "stylesheet" type= "text/css" media= "screen and (max-device-width:400px)" href= "Tinyscreen.css"/>

The code above means that if the screen width is less than 400 pixels (max-device-width:400px), the Tinyscreen.css file is loaded.

CSS code for Web pages to automatically adapt to screen width 3

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

If the screen width is between 400 pixels to 600 pixels, the Smallscreen.css file is loaded.

In addition to loading CSS files with HTML tags, you can also load them in an existing CSS file.

Vii. @media rules for CSS

The same CSS file, you can also choose to apply different CSS rules depending on the screen resolution.

@media screen and (max-device-width:400px) {

. column {

Float:none;

Width:auto;

}

#sidebar {

Display:none;

}

}

The above code means that if the screen width is less than 400 pixels, the column block is de-floating (float:none), Width auto-adjusting (Width:auto), and the sidebar block is not displayed (Display:none).

Eight, the image of the adaptive (fluid image)

In addition to layout and text, adaptive web design must also implement automatic scaling of pictures.

This is just one line of CSS code:

img {max-width:100%;}

This line of code is also valid for most video embedded pages, so it can be written as:

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

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

img {width:100%;}

Additionally, image distortion may occur when the Windows platform scales pictures. At this point, you can try to use IE's proprietary commands:

img {-ms-interpolation-mode:bicubic;}

Or, Ethan Marcotte's imgsizer.js.

Addloadevent (function () {

var IMGs = document.getElementById ("content"). getElementsByTagName ("img");

Imgsizer.collate (IMGs);

});

Properties of CSS:

Display:block; display as a block. Inline-block; The block is displayed on a line. Line-height the line is high. A:hover{background: The mouse slides over the displayed background picture.

font-size; font size font-family;100% Microsoft Yahei; font Microsoft JAS Black, font-weight; font weight float:left; left floating.

Divi Theme:

Use Divi Theme design page, graphical interface more simple and convenient, setting:padding:0px. Z-index only works on positioning elements (e.g. position:absolute;)!

CSS Adaptive Web page (CSS first article)