How does the bootstrap framework adapt to mobile phones?

Today, as there are more and more mobile terminal devices, it would be too expensive to adapt and develop for all screens.

# Through responsive development, a website can be compatible with multiple terminals. (Recommended learning: Bootstrap video tutorial)

Through responsive layout, the website can have a better reading experience on computers, tablets and mobile phones, and the screen size does not matter The content of the web page displayed to the user is also different. We can use media queries to detect the size of the screen (mainly detecting the width), and set different CSS styles to achieve a responsive layout.

The principle of responsive development: media query

Media query, query the width of the current screen (media media), for different screens Width sets different styles to suit different screens. When you reset the browser size, the page will also be re-rendered based on the browser's width and height. Simply put, you can set different styles under different screens to adapt to different screens.

Implementation method: Specify the web page layout of a certain width range by querying the width of the screen.

Ultra small screen (mobile device) w<768px

Small screen device 768px-992px 768 <= w <992

Medium screen 992px-1200px 992 =< w <1200

Widescreen device 1200px or above w>=1200

CSS Syntax:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

More Bootstrap related technical articles , please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of How does the bootstrap framework adapt to mobile phones?. For more information, please follow other related articles on the PHP Chinese website!