Practical tips-three simple steps to make your website responsive-

Today, it is far from enough to make a website look good on a desktop screen. It must also be well presented on tablets and smartphones. A responsive website can adapt to the screen size of the client and automatically respond to the size changes of the client ....,. Today, it is far from enough to make a website look good on a desktop screen. It must also be well presented on tablets and smartphones. A responsive website can adapt to the screen size of the client and automatically respond to the size changes of the client. In this article, I will show you how to easily turn your website into a Responsive website through three simple steps ).

1-Layout

When you create a responsive website or make an existing website responsive, you must first focus on the layout of elements. When creating a responsive website, I always create a non-responsive layout with a fixed page width. If the non-response version is complete very well, I will add a media query ( Media Queries) And response code. This operation method makes it easier to implement responsive features and focus on a task at the same time.
When you have completed a website with no response, the first thing you do is in your HTMLPage, paste the following code into the tag. This will set the screen to be displayed in size, provide a full view of the website in the iPhone and other smart phone browsers, and prohibit users from scaling the page.

Now it is time to add some media queries. Based on the W3C website, a media query consists of a media type and a conditional expression for zero or more media queries. By using media queries, you can display the output devices in a specific range without changing the content. In other words, media queries make your website look good on a variety of monitors, from small smartphones to large computer screens.

Media query depends on your website layout, so it is difficult for me to provide you with a ready-to-use code snippet. However, the following code is a good starting point for most websites. In this example, # primary is the main content area and # secondary is the sidebar.

From the code, you can see that I have defined two types: first, there is a maximum width of 1060px for the horizontal display optimized by the tablet. # Primary accounts for 67% of the width of its parent container, # senondary accounts for 30%, plus the left margin of 3%. The second specification is used for tablets and smaller screen sizes.

Because the smartphone's screen size is small, I decided to set the 100% width for # primary, and # secondary also set the 100% width, which will be under # primary. As I have already said, you may have to modify this code bit to meet your website's specific needs.

/* Tablet Landscape */@media screen and (max-width: 1060px) {    #primary { width:67%; }    #secondary { width:30%; margin-left:3%;} } /* Tabled Portrait */@media screen and (max-width: 768px) {    #primary { width:100%; }    #secondary { width:100%; margin:0; border:none; }}

After that, let's see how your layout responds. To do this, I use a very responsive test tool created by Matt Kersley.

2. Media

A responsive layout is the first step to respond to websites. Now, let's focus on another very important aspect of a modern Website: media, such as videos or images. The followingCSSThe code will ensure that your images will never be greater than their parent container, and the code is very simple and applies to most websites. Note that IE6 and other old browsers do not support the max-width command.

img { max-width: 100%; }

Although the above technology is effective, sometimes you may need to have more control over the image, such as displaying different images based on the client's display size.

This is a good method invented by Nicolas Gallagher. Let's take a look at HTML:

As you can see, we use the data-* attribute to store the URL of the replaced image. Now, let's use powerfulCSS3To specify a replacement image for the media that matches the min-device-width condition:

@media (min-device-width:600px) {    img[data-src-600px] {        content: attr(data-src-600px, url);    }} @media (min-device-width:800px) {    img[data-src-800px] {        content: attr(data-src-800px, url);    }}

Impressive, isn't it? Now, let's take a look at another important media-video on today's website. Since most websites use videos from third-party websites, I decided to focus on Nick La's elastic video technology, which allows you to embed responsive videos.

HTML:

CSS:

.video-container {    position: relative;    padding-bottom: 56.25%;    padding-top: 30px;    height: 0;    overflow: hidden;} .video-container iframe, .video-container object, .video-container embed {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;}

After the Code is applied to your website, the embedded video is also Responsive.

3-font

The last step of this tutorial is absolutely important, but it is often ignored by website developers-font. Up to now, most developers (including myself) have used pixels to define the font size. Although pixels are OK for normal websites, responsive fonts should be available for responsive websites. In fact, the size of a responsive font should be associated with the width of its parent container so that it can adapt to the screen of the client.

　　 CSS3The specification introduces a new unit called rem, which is similar to the em class, but relativeHTMLElement, rem is easier to use.

Rem is relative to HTML elements. Do not forget to reset the HTML font size:

html { font-size:100%; }

After completion, you can define the response font size, as shown below:

@media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }

Note that the old browser does not support rem units, so do not forget to implement an alternative.

This is all about today. I hope you will like this tutorial!

The above is the "Practical Tips"-Let your website become responsive content in three simple steps. For more information, please follow the PHP Chinese Network (www.php1.cn )!