Simple responsive implementation of CSS

1. Allow automatic adjustment of web page width

First, add a line of viewport meta tags at the head of the web page code.

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

viewport is the default width and height of the web page. The above line of code means that 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.

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. Use CSS3 media query @media query

There are three ways to express media queries:

1. Use

# directly in the CSS file ##@media type and (condition 1) and (condition 2){css style}

Example:

@media screen and (max-width:980px ) {
 body{
 background-color: red;
 }
}

2 .Use @import to import

@import url("css/moxie.css") all and (max-width:980px);

3. It is also the most commonly used: use link connection, and the media attribute is used to set the query method:

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

3. Some other points to note

1. Do not use absolute width

Since the web page will adjust the layout according to the screen width, you cannot use the layout of absolute width, nor can you use elements with absolute width. This one is very important. Specifically, the CSS code cannot specify the pixel width: width: xxx px; it can only specify the percentage width: width: xx%; or width: auto;

2. Use relative size fonts

remInstead of px

Common font units in css are px, em, rem and %

3. Fluid grid

"Flow The meaning of "layout" is that the position of each block is floating and 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 element will automatically scroll to the bottom of the previous element and will not overflow (overflow) in the horizontal direction, avoiding the horizontal scroll bar. 's appearance.

In addition, you must be very careful when using absolute positioning (position: absolute).

4. Adaptive image (fluid image)

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

This only requires one line of CSS code:

img { max-width: 100%;}

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

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

Old versions of IE Max-width is not supported, so I have to write:

img { width: 100%; }

In addition, when scaling images on the Windows platform, image distortion may occur. At this time, you can try to use IE's proprietary command:

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

Or, Ethan Marcotte's imgSizer.js:

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

Recommended learning:

CSS

The above is the detailed content of Simple responsive implementation of CSS. For more information, please follow other related articles on the PHP Chinese website!