Responsive Web Design
Because the user may browse the web on any size device, it's important for websites to resize and reorganize their content to best fit screens of all sizes.
When a website responds to the size of the screen it’s viewed on, it’s called a responsive website.
Media Queries
By media queries, CSS can adjust its content to fit different screen sizes. CSS can identify the current screen size, and then based on the screen width to apply different CSS styles.
Represents the embodiment, when the screen width is less than 480px, text in the font size for the body element 12px.
Range
It represents the embodiment, when the screen size between 320px ~ 480px, below the CSS rules will take effect. Note that the second and, it will link the two dimensions.
The embodiments may be represented by two separate rules:
When the screen size is greater than or equal 320px, first media query into effect; 480px when the screen size is greater than equal to, the second media query into effect, also intended to cover CSS rules appear in the first media query, the new application, or increase the CSS rules (not appeared in the first media query).
Dots Per Inch (DPI)
Sometimes, in order to avoid too much user-resolution images only when a user uses a high-resolution device, to which we provide higher quality media (images, video, etc.).
We can min-resolution identification and max-resolution screen resolution, to perform some CSS rules.
The above example, when a resolution of 300dpi or more, we display high resolution images and other media.
And Operator
In the previous example, and used to connect min-width and max-width, denoted window range. Similarly, and it can also be used to connect multiple media features.
The example above, the screen must meet two media features and connections, CSS below to take effect.
Comma Separated List
For any of a plurality of conditions are satisfied (one of multiple media features), then perform some CSS, you need comma conditional separated.
To meet any of these items:
The screen is more than 480 pixels wide
The screen is in landscape mode
In the embodiment, two features to meet any one of (comma) is performed under the CSS.
Media in which the Feature IS SECOND, at The Orientation . When the screen width> height, orientation is Landscape (lateral); when the width <height, orientation to Portrait (the longitudinal direction).
Breakpoints
Not commonly used, to not interpret the
Review: Media Queries
When a website responds to the size of the screen it’s viewed on, it’s called a responsive website.
You can write media queries to help with different screen sizes.
Media queries require media features. Media features are the conditions that must be met to render the CSS within a media query.
Media features can detect many aspects of a user’s browser, including the screen’s width, height, resolution, orientation, and more.
The and operator requires multiple media features to be true at once.
A comma separated list of media features only requires one media feature to be true for the code within to be applied.
The best practice for identifying where media queries should be set is by resizing the browser to determine where the content naturally breaks. Natural breakpoints are found by resizing the browser.