Shulou(Shulou.com)06/03 Report--

This article is about whether bootstrap is a responsive design or not. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

What is a responsive web design?

Responsive Web design is a way for users to browse websites with devices of all sizes to get good visual effects. For example, if you browse a website on a computer monitor and then on a smartphone, the screen size of the smartphone is much smaller than that of the computer monitor, but you don't feel any difference, and the user experience is almost the same. this shows that the site is very good at responsive design.

How does responsive web design work?

In order to apply a responsive Web design, you need to create a CSS that adapts to various device sizes and styles. Once the page is loaded on a particular device, using various fonts and Web development techniques, such as media queries (Media Queries), the device's viewport size is first detected, and then device-specific styles are loaded.

In-depth study of responsive web design of css?

We will learn how "responsive design" makes nuances through the study of 'bootstrap-responsive.css''. Before you do that, you must add the following line of code to the header area of the page:

The meta label for viewports overrides the default viewports and helps load styles related to specific viewports.

The width property sets the screen width. It contains a value, such as 320, which represents 320 pixels, or a value of 'device-width', that tells the browser to use the original resolution.

The initial-scale property 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 a responsive CSS for Bootstrap, as follows:

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

The first area starts with'@ media (max-width: 480px)'to style devices with a maximum width of 480 pixels.

The second area starts with'@ media (max-width: 767px)'to style devices with a maximum width of 767 pixels.

The third area starts with'@ media (min-width: 768px) and (max-width: 979px)'to style devices with a minimum width of 768 pixels and a maximum width of 979 pixels.

The next area is to style devices with a maximum width of 979 pixels. So start with'@ media (max-width: 979px)'.

The last two areas start with'@ media (min-width: 980px) 'and' @ media (min-width: 1200px)', the former setting styles for devices with a minimum width of 980 pixels, and the second setting styles for devices with a minimum width of 1200 pixels.

So, the basic purpose of this stylesheet is to determine the style to use based on the maximum and minimum width of the device by using the 'min-width' and' max-width' properties.

explain

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

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

two。 Whenever necessary, it uses stack elements instead of floating elements. If you don't know what stack elements are, 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 from arbitrarily positioned elements (including relative positioning elements, which have a calculated value of'zMurindex 'instead of' auto'). The stack context is not required relative to the contained block.

3. Render the size of the title and text correctly.

Faster development of mobile-friendly layouts.

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

Visible-phone, visible on phones with widths of 767px or less, hidden invisible on 979px to 768px tablets, hidden invisible on the desktop, this is the default.

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

Visible-desktop, hidden invisible on phones with widths of 767px or less, invisible on 979px-to-768px tablets, visible on the desktop, this is the default.

Hidden-phone, hidden and invisible on phones with widths of 767px or less, is visible on 979px to 768px tablets and on desktops, which is the default.

Hidden-tablet, visible on phones with widths of 767px or less, hidden invisible on 979px-to-768px tablets, visible on the desktop, this is the default

Hidden-desktop, visible on phones with widths of 767px or less, visible on 979px-to-768px tablets, and hidden from the desktop, is the default.

Thank you for reading! This is the end of this article on whether bootstrap is responsive design. I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.