Responsive Web design is a way for users to get good visual effects by browsing websites with devices of various sizes. For example, you can browse a website on a computer monitor first, and then on a smart phone. The screen size of a smart phone is much smaller than that of a computer monitor, but you don't feel any difference. The user experience of the two is almost the same, which indicates that the website is well done in response design. We have applied response performance in our flow layout instance, and please browse under different screen sizes. You can adjust your browser through Chrome or FireFox's window resizing extension.

Click here to view Example of Bootstrap Responsive Design

How Responsive Web Design Works

In order to apply responsive Web design, you need to create a CSS that includes a variety of device size styles. Once a page is loaded on a specific device, it uses various fonts and Web development technologies, such as Media Queries. At this time, the viewport size of the device will be detected first, and then the device specific style will be loaded.

In depth study of CSS for responsive Web design

We will learn how "responsive design" can achieve nuances through 'bootstrap responsive. css'. Before this, you must add the following line of code in the header area of the page:

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

The meta label of the viewport, which overrides the default viewport and helps to load styles related to specific viewports.

width Property to set the screen width. It contains a value, such as 320, representing 320 pixels, or 'device width', to tell the browser to use the original resolution.

initial-scale The attribute is the original scale of the viewport. When set to 1.0, the original width of the device is rendered.

Of course, you must add responsive CSS for Bootstrap, as shown below:

 <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Now, if you look for responsive CSS files, you will find that after some public statements (from line numbers 10 to 22), there are various '@media' The starting area. This is how to write styles for various devices.

The first area is marked with ' @media (max-width: 480px) 'Start by styling devices with a maximum width of 480 pixels.

The second area is marked with ' @media (max-width: 767px) 'Start by styling devices with a maximum width of 767 pixels.

The third area is marked with ' @Media (min width: 768px) and (max width: 979px) 'Start by styling devices with a minimum width of 768 pixels and a maximum width of 979 pixels.

The next area is for styling devices with a maximum width of 979 pixels. So it's a ' @media (max-width: 979px) 'Start.

The last two areas are marked with ' @Media (min width: 980px) 'and' @ media (min width: 1200px) 'At the beginning, the former is to set the style for the device with a minimum width of 980 pixels, and the latter is to set the style for the device with a minimum width of 1200 pixels.

Therefore, the basic function of the style sheet is to use the ' min-width 'and' max-width 'attribute to determine the style used according to the maximum and minimum width of the device.

explain

To make the layout more responsive, Bootstrap does three things:

1. Changed the width of the column in the grid.

2. Whenever necessary, it uses stack elements instead of floating elements. If you don't know what a stack element is, the following form from w3.org may provide some help:

The root element (html) forms the root of the stack context, and other stack contexts are generated by arbitrarily positioned elements (including relative positioning elements, which have a calculated value of 'z-index' instead of 'auto'). The stack context is not required relative to the contained block.

3. The size of the title and text should be correctly rendered.

Faster development of mobile device friendly layouts

Bootstrap has several practical classes for developing mobile device friendly layouts. These classes can be seen on 'response. less'.

.visible-phone , visible on phones with a width of 767px or less, invisible on tablets with a width of 979px to 768px, and invisible on desktops. This is the default.

.visible-tablet , hidden and invisible on mobile phones with a width of 767px or less, visible on tablets with a width of 979px to 768px, hidden and invisible on the desktop, which is the default.

.visible-desktop , hidden and invisible on mobile phones with a width of 767px or less, hidden and invisible on tablets with a width of 979px to 768px, visible on the desktop, which is the default.

.hidden-phone , hidden and invisible on mobile phones with a width of 767px or less, visible on tablets with a width of 979px to 768px, and visible on desktops. This is the default.

.hidden-tablet , visible on phones with a width of 767px or less, invisible on tablets with a width of 979px to 768px, and visible on desktops by default.

.hidden-desktop , visible on phones with a width of 767px or less, visible on tablets with a width of 979px to 768px, and invisible on the desktop. This is the default.