Complete a day to change the PC website to adaptive! It turned out to be so simple!

Http://www.webkaka.com/blog/archives/how-to-modify-a-web-page-to-be-responsive.html

Complete a day to change the PC website to adaptive! It turned out to be so simple! Author: Kaka Time: 2015-8-27 11:26:9 Browse:5279 Comments: 8

Web site adaptation, many people think it is very senior need a lot of time to achieve things, do not want to go to a ready-made site to adapt, rather than do a separate mobile station. I previously felt that the implementation of the site adaptive, to design a lot of CSS, and to combine jquery, to achieve adaptive different devices. I thought I wanted to redesign the picture of the article, or to use JavaScript to control the size of the picture, because the picture was too big to go beyond the phone screen, and the workload was horrible. A variety of concerns so I have been afraid to start the operation, resulting in the site is still just a PC version, but also did not do a mobile version.

Often in the group to see everyone said mobile traffic how much more, some also said that mobile traffic significantly more than the PC traffic, said the mobile traffic ads click-through rate is higher than the PC traffic, imperceptible role, I also slowly affected by the infection, so decided to change the site to adaptive!

Why do I change the website to adaptive instead of a separate mobile station? Because I want to be a Pepsi, don't want to maintain both PC station and mobile station, this will save a lot of time for future update articles.

Because it is the first contact, there is no practical experience, so we need to look for information to see the case side to modify the code.

To my surprise, it took me just one day to finish the work!

Let's take a look at my changes.

PC version Web page

PC version Web page

Mobile version of the page

Mobile version of the page

This mobile version shows less content, in fact, the mobile version of the page, at the end of the article also shows Google ads, the end of the article also has a user message, the user can still comment on the phone, in addition, "extended reading" later also showed the PC version of the sidebar several columns of the article list, and finally, Baidu Mobile's adaptive ads are placed above the coloring layer of the search box at the end of the page.

How easy is it to change the website to adaptive?

Let's talk about how to change the Web page to adaptive, why do I say it's simple? Because you don't need any advanced web design techniques, you just need to know a little bit of HTML, a little bit of CSS, and the time-consuming changes are only a few hours for a normal web page.

I have divided the entire process into two steps.

The first step, very simple, to copy the following code directly into the

<meta http-equiv= "Cache-control" content= "No-transform"/>
<meta http-equiv= "Cache-control" content= "No-siteapp"/>
<meta name= "viewport" content= "Width=device-width,initial-scale=1.0,user-scalable=yes"/>

The previous two meta,No-siteapp and No-transform, is telling the search engine not to transcode the page. The third meta, declaring that the Web page can zoom out.

The second step is to add the following CSS code to the

<style type= "Text/css" >
@media (max-width:960px)
{

}
</style>

This CSS code, meaning that the screen width is less than 960px when the style of execution, of course, you can change 960px to other smaller width, such as 760px.

Next, all we have to do is hide the content that doesn't need to be displayed on the mobile page. How to hide? This need to understand the HTML code of the page, you need to analyze each module used Div, such as the head of the Div, navigation bar Div, the body of the Div, Sidebar Div, footer Div, and then we use CSS to hide the div without display, the code is very simple, is Display:none.

For example, the structure of the Web page is as follows:

Web page structure diagram

The mobile page only needs to display the body, we hide the other parts, the code is as follows:

<style type= "Text/css" >
@media (max-width:960px)
{
/* Web page Full Screen */
body {width:100%;}

/* Body Full Screen display */
#divMain {width:100%}

/* In order to avoid body picture exceeding screen width */
/* Body picture width is up to 90% of the screen width */
#divMain img{max-width:90%}

/* Hide head, navigation, Sidebar, footer */
#divHead {Display:none}
#divNav {Display:none}
#divSide {Display:none}
#divBottom {Display:none}
}
</style>

This way, when you browse the Web on your phone, only the text is displayed.

Web-Adaptive is doing this!

See this example, is not very simple? Web-Adaptive is doing this!

However, to adapt the mobile phone to symbolizing, you also need to add some code, such as writing a header for the Mobile Web page, navigation and footer Div, after writing the default is hidden, and then displayed on the phone.

As shown in the page structure:

The structure of the Web page containing the phone module

CSS can be written like this

<style type= "Text/css" >
/* Hide phone headers, navigation and footers by default */
#divHead_mobile {Display:none}
#divNav_mobile {Display:none}
#divBottom_mobile {Display:none}
@media (max-width:960px)
{
/* Web page Full Screen */
body {width:100%;}

/* Body Full Screen display */
#divMain {width:100%}

/* In order to avoid body picture exceeding screen width */
/* Body picture width is up to 90% of the screen width */
#divMain img{max-width:90%}

/* Hide head, navigation, Sidebar, footer */
#divHead {Display:none}
#divNav {Display:none}
#divSide {Display:none}
#divBottom {Display:none}

/* Show phone headers, navigation, and footers */
#divHead_mobile {Display:block}
#divNav_mobile {Display:block}
#divBottom_mobile {Display:block}
}
</style>

At this point, you can adapt to the design of a beautiful mobile version of the page.

After reading this example, does it feel that adaptive design is actually very easy? Of course, this is just one of the most basic adaptive design, focusing on the introduction of ideas, you can under the guidance of this idea, to complete the more complex design. You use the computer and mobile phone to browse my blog (http://www.webkaka.com/blog) See, my blog is so adaptive!

Complete a day to change the PC website to adaptive! It turned out to be so simple!