Responsive



During his time with the idea of attaching the frame as required post readers, including the requirements to 7% involve writing to interface displayed in Responsive website. From there I realized there are a lot of readers here have yet to understand how an interface may display Responsive website is like, so in this article I will explain and guide you apply to websites Responsive himself.

Requires knowledge

In this article I only speak through Responsive to the basic knowledge alone will not say the last, so you should prepare HTML and CSS knowledge fundamental to be able to understand fully.


Responsive is what?

responsive

Responsive an adjective to refer to a website may display compatible across all dimensions of the browser display. For example, if the interface normal website place a fixed width is 800px, then certainly if look at the phone's browser with only horizontally from 320px - 420px will not display all.

Can you believe that we can assign a value from the absolute width (800px) to type the relative value of the percentage (%), it can be displayed corresponding. This is true, but let's say you have 3 column website on a row, whether that mobile browser, the human eye can often see the details without zooming the screen or not? Therefore, we would want the interface to be displayed up a little on the smaller browsers conventional browsers, and the solution Responsive do this the fastest and easiest.

Responsive action by us will write CSS to tell the browser to understand and execute it on the size of certain browsers. For example you can set a certain CSS paragraph applies only to the browser size maximum width 320px (phone). This means that a technical Responsive design from client-side processing, but does not send queries to the server for processing (server-side), it has a drawback that your browser must take more time to handle CSS.

So how to apply to the interface Responsive website?

In order for your website to become Responsive, we have two steps:

Step 1. Declare the viewport meta

First you need to put this card into the folder <head> section on the HTML code of the website.

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

viewport meta tag means a set for browser display corresponding to the screen size. Such as the above example, that means you will set the browser display and corresponding fixed on all devices based on the width of the device (device-width) and does not allow users to enlarge (initial-scale settings with fixed value of 1). This is my card encourages you to use the entire project Responsive.

Also this viewport meta tag also has the values as:

  • width: set the width of the viewport.
  • device-width: Fixed width of the device.
  • height: set the height of the viewport.
  • device-height: Height of equipment fixed.
  • initial-scale: Set the zoom level at the beginning, a value of 1 means no zoom, and the values are set, the user can not zoom because it was fixed.
  • minimum-scale: Minimum zoom level of the device with a browser.
  • maximum-scale: The maximum zoom level device with a browser.
  • user-scalable: Allow users to zoom in, the value is yes or no.

Why use meta viewport? Just look at the example of a content meta viewport meta viewport and no offline.

Step 2. Write CSS to the width of the device

Even at this stage, we will proceed to write CSS corresponding to each level of the width or height of the equipment, usually we only write based on width and is calculated on the pixel unit. Many people may be calculated based on the child unit, rem, DPI, percentages, ... but if you are a novice, then every pixel for easy offline use.

To write CSS corresponding to the width of the browser, we'll use the querymedia tags in CSS3 (media query) as follows:

01
02
03
04
05
06
07
08
09
10
body {
   background: #fff;
   color: 333;
}
 
@media all and (max-width: 320px) {
   body {
      background: #e7e7e7;
   }
}

This means your website will default (background) is white, but when scaled to the browser from 0px to 320px, then it will have a base of gray with color code # e7e7e7.

In the preceding paragraph, paragraphmedia all and (max-width: 320px) mean setting breakpoints for the entire device (all - media type) and have a fixed width max 320px (max-width - media features) , corresponding 320px width size of the iPhone screen. And the CSS section within this query will be executed when the browser displays the correct shrink in size from 320px or less.

Additionally, you can also set more conditions:

01
@media only screen and (min-width: 320px) and (max-width: 860px) {...}

Ie this query will only apply to desktop, tablet, smartphone and have a minimum size is 320px screen but smaller than 860px.

Regarding the value of media type and media features inmedia query, you can refer to more fully at W3Schools but usually we just write CSS for screen media type and media features are only around min-width, max -width only.

How to check Responsive?

When working, you can check by scaling Responsive browser size manually, but it is not "smart" much. But I would encourage you to use the support tools to check, a check of the tools that I like best Responsive Resizer that is easy to use and lightweight. Consider using in image below:

List of screen size device

When writing CSS for Responsive interface, the most important thing is you have to know the screen size of the phone type common to be able to write CSS is as standard and make sure it works well on many devices, especially common devices.

You can refer to the size width of the devices here, but most of the projects you just need to create the CSS breakpoint as follows:

  • max-width: 320px (điện thoại di động, hiển thị chiều dọc)
  • max-width: 480px (điện thoại di động, hiển thị chiều ngang)
  • max-width: 600px (máy tính bảng, hiển thị chiều dọc)
  • max-width: 800px (máy tính bảng, hiển thị chiều ngang)
  • max-width: 768px (máy tính bảng loại to, hiển thị chiều dọc)
  • max-width: 1024px (máy tính bảng loại to, hiển thị chiều ngang)
  • min-width: 1025px (từ size này trở lên là danh cho desktop thông thường).

Example CSS structure of an interface common Responsive

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
/* Các CSS này dành cho toàn bộ website và desktop */
body {
   background: #fff;
   color: 333;
}
 
/* Dành cho điện thoại */
@media all and (max-width: 480px) {
 
}
 
/* Dành cho máy tính bảng */
@media all and (max-width: 1024px) {
 
}

Concept Mobile-First

When we talk about making the interface Responsive, you also need to know via Mobile-first concept because it will help the process of making your Responsive interface much quicker. Mobile-first name means a design process that we will start designing the interface for the phone in advance and use your phone as a platform initially, then will come to other devices like tablets, desktop, retina, ...

Features of mobile-first process is that we only use the min-width media features rather use something else. I have the following example:

01
02
03
04
05
06
@media all and (min-width: 320px) {
body {
   background: #e7e7e7;
   color: #333333;
}
}

This means that the device has a width of at least 320px will apply the CSS inside, of course, it will also include interfaces always tablet, desktop, ...

And when using the mobile-first process, the CSS will have this structure:

01
02
03
04
05
06
07
08
09
10
11
/* Dành cho điện thoại */
@media all and (min-width: 320px) {...<span style="line-height: 1.5;">}</span>
 
/* Dành cho máy tính bảng chiều dọc */
@media all and (min-width: 600px) {...}
 
/* Dành cho máy tính bảng chiều ngang */
@media all and (min-width: 1024px) {...}
 
/* Dành cho màn hình desktop */
@media all and (min-width: 1280px) {...}

So why should use the mobile-first? There are many reasons such as:

     Maximum concentration in telephone interface for phone usage trend is increasing.
     Avoid rewriting CSS, because a phone CSS can be re-used on the desktop. But if you write CSS on the desktop before it in the phone interface you still have to write back if you want to customize.
     Easy to deploy and manage, upgrade later.
     Avoid the error displayed on the phone by customizing the CSS at the desktop.
     And many other reasons known only when refreshing.
Some knowledge to know when writing CSS Responsive

    
In addition to the breakpoint unit is px, the unit of measurement of length should be the percentage website. Or rather using relative units.
    
Max-width should be used instead to avoid fixed width width.
    
Use display: none to hide the components needed in each device that you want to hide. And display: block in the device should show up.
    
Using options! Important as needed for writing CSS.

Basically that was it, in fact, the only stretch Responsive least part do menu but when practice you will know more details.
Conclusion

In this article, I said the last detail Responsive concept and how to implement an interface How Responsive is. Now you can practice by creating a simple HTML file, and then declare the viewport meta tag and then try to write CSS to know more about its operations offline.

Hopefully in the future, we will have a tutorial as a Web interface Responsive HTML format so that you can complete self practice. And when you understand how to do a GUI Responsive WordPress theme then job support is no longer too difficult Responsive again. Everything will be presenting themselves slowly.


Related Articles

Partner web seo

VIET SEO COMPUTING AND SERVICES

HO CHI MINH: 
 * 7th Floor, 60 Nguyen Van Thu, Dakao Ward, District 1, HCMC, Vietnam
 * Tel: (+848) 8816 2969 +84 917 212 969 (Mr. Thanh) - +84 908 744 256 (Mr. Thang)

HA NOI
* Hotline: +84 917 212 969 (Mr. Thanh) - +84 908 744 256 (Mr. Thang)
* 96/12, Duy Tan Street, Dich Vong Hau Ward, Cau Giay District, Ha Noi, VN

BINH DUONG:
* Tel: +84 2743 511 072 - Hotline: +84 917 212 969 (Mr. Thanh) - +84 908 744 256 (Mr. Thang)
* No 299/11, Tan Dinh Village, Ben Cat District, Binh Duong Province

DA NANG
* Hotline: +84 917 212 969 (Mr. Thanh) - +84 908 744 256 (Mr. Thang)
* 112/2 Nguyen Quang Bich, Hai Chau District, Dang Nang, VN

* Email: vietseo @vietseo.com - congtyvietseo @gmail.com
* Zalo, Viber: +84917.212.969 - Skype ID: vietseo

  • Online12
  • Today:12
  • Visitor:1526795