7 steps to automatically adapt a PC website to a mobile Web page

How does a traditional website complete a rapid transformation to a mobile device? Through the mobile adaptation technology can be realized, the network is the first web-based technology services company, and mobile adaptation is mainly through the bottom of the web technology development means to complete, the following network will be from the technical point of view to tell you through 7 steps to complete a PC website to the mobile device jump!

1 Allow Web page width to be adjusted automatically

How does "adaptive Web Design" work? It's not that hard actually.

First, in the header of the page code, add a row of viewport meta tags.

Viewport is the default width and height of the page, which means that the page width defaults to the screen width (width=device-width), the original scale (initial-scale=1) is 1.0, that is, the initial size of the page occupies 100% of the screen area.

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.

2, do not use absolute width

Because the page adjusts the layout based on the width of the screen, you cannot use an absolute width layout or an element with an absolute width. This is a very important article.

Specifically, CSS code cannot specify pixel widths:

Width:xxxpx;

Only percent widths can be specified:

width:xx%;

Or

Width:auto;

3, the relative size of the font

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

body{

Font:normal100%helvetica,arial,sans-serif;

}

The above code specifies that the font size is 100% of the default size of the page, which is 16 pixels.

h1{

Font-size:1.5em;

}

Then, the size of the H1 is 1.5 times times the default size, which is 24 pixels (24/16=1.5).

small{

Font-size:0.875em;

}

The size of the small element is 0.875 times times the default size, which is 14 pixels (14/16=0.875).

4. Flow layout (Fluidgrid)

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.

5. Select Load CSS

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

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

Media= "Screenand (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.

Media= "Screenand (min-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.

6. CSS @media rules

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

@mediascreenand (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).

7, the image of the Adaptive (fluidimage)

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, Ethanmarcotte's imgsizer.js.

Addloadevent (function () {

Varimgs=document.getelementbyid ("Content"). getElementsByTagName ("img");

Imgsizer.collate (IMGs);

});

It is best to do a picture of the appropriate resolution. There are many ways to do the same, both on the server and on the client side.

Transduction Network perennial commitment to web technology development, the adaptation of PC to mobile phone has a large number of technical precipitation and the baptism of the project, is the earliest front-end development services company, to provide high-quality web page transduction, PSD to HTML5, Mobile WebApp transduction, responsive web layout, EDM mail template production, Hybridapp transduction, micro-site, micro-scene HTML production and other front-end technology development outsourcing services.

If you are interested in web front-end or responsive cross-screen adaptation technology, please add US public number: Qietuwang

7 steps to automatically adapt a PC website to a mobile Web page