Responsive web-Media queries

Responsive web-Media queries

Media query is an adhesive that connects many reactive concepts and tools together. These query statements are simple but powerful, they allow us to detect device properties, define rules, and load different CSS properties, depending on the rules. For example, you can optimize the navigation menu for different devices and convert the full horizontal menu on the desktop browser to a "hamburger" (vertical or collapsed) menu structure that is often encountered on mobile devices

The core of the Web responsive layout is two media queries and views. In this article, we'll see how to use media queries to create a responsive layout.

Media Query is an adhesive that connects many reactive concepts and tools together. These query statements are simple but powerful, they allow us to detect device properties, define rules, and load different CSS properties, depending on the rules. For example, you can optimize the navigation menu for different devices and convert the full horizontal menu on the desktop browser to a "hamburger" (vertical or collapsed) menu structure that is often encountered on mobile devices.

Create a query

Let's try a practical example. On the website Rwdflix (example of a video site created by the author in a book) the main content of the aside tag is the announcements and news, the phone and tablet visitors may focus on the middle of the program list instead of the other, so let's hide this element (aside) for the user of the small screen device.

In the next section of this article, I'll use the @media method shown earlier to make media queries

Removes the CSS class from the current aside and replaces it with the following media query statement:

{    aside {        width: 33%;    }  {    aside {        display: none;    } }

The role of this pair of media query statements is to set the contents of the aside element to 33% screen width when the screen width is greater than 680px (by Min-width to ask if the screen width is 680px minimum) When the screen width is narrower than 680px (by Max-width to ask if the screen width is 680px maximum), the aside element is hidden.

Next, when the aside tag is hidden, set the TV video list to the width of the screen.

{    margin-bottom: 25px;}  {    section.showslisting {        width: 66%;    }  {    section.showslisting {        width: 100%;    } }

When we change the page size in the browser of the desktop, we can see that the aside tag appears or hides as the width of our page changes, and the content portion of the page adjusts its width appropriately.

Of course we can use some basic logic in our media queries, and then we can combine these logic to create a lot of situations. For example, you can use the following logic:

{    ...}

The code above will call the CSS style when the width of the device is between 640px and 1136px. The Min-width property is the minimum value for the page width, and max-width is the maximum value.

To match the above media query statements, you need two conditions to be true. If you want to use a comma instead of and with a logical or (or), the style is matched when a condition is true (the wood has an or expression, do not confuse), and the following query statement will be used for the screen or printing device (print):

{    ...}

You can also combine and and or logic to create more complex queries. The following page is currently rendered in landscape mode on a wide screen phone:

In this picture above, the screen width is 732px, already above the 640px set above. However, the aside element does not meet the requirements hidden in the phone, so it needs to be hidden when the screen size is less than 640px or when the device is sideways.

orientation: Portrait | Landscape

Portrait

Specifies that the visible area of the page in the output device is greater than or equal to the width (typically a vertical screen)

Landscape

except for portrait value, it is landscape (usually horizontal screen)

{    aside {        display: none;    } }

and the corresponding media query in the Video list section:

{    section.showslisting {        width: 100%;    } }

Here we have added a Max-width constraint to display the display of the aside in flat screen mode, and also show how to combine the logical constraints.

Logical query for only and not

We can also use only and not to create accurate media queries. For example, the following scenario would match a device with at least 640px width but excludes the print media type:

{    ...}

In contrast, the following query statement will only apply to devices of the screen media type and to a minimum of 640px width:

{    ...}

Query attributes

The width and height queries We currently see are the most widely used query statements, but there are other useful media features (feature) to handle different features of the device. Includes color capability, aspect ratio, orientation, resolution, and features based on mozilla-and webkit-specific vendors (browsers). Most of these features support the min-and max-prefixes and are similar to those of the above query statements.

Aspect ratio Aspect-radio

The aspect ratio feature allows us to limit the ratio of horizontal pixels to vertical pixels, separated by a slash. For example:

{    ...}

The above rule matches a device with a screen aspect ratio of 1:1 or greater, so it can be a square screen or a horizontal screen.

The common use of this rule is to detect a wider range of devices that are useful when playing video:

{    ...}

Orientation Orientation

As shown earlier, this feature detects whether the device is a horizontal or vertical screen. For example:

{//Horizontal screen     ...}

And also:

{//Vertical screen     ...}

Colour color

This feature checks whether a device can support a specific color level. For example, the following statement can be used to detect if a device supports at least 8-bit color (256 colors):

{    ...}

Color Index Color-index

This parameter functions like color, but detects the number of colors instead of bit-level:

{    ...}

Monochrome Monochrome

Similarly, this parameter is similar to color, but detects the grayscale of the device:

{    ...}

Resolution resolution

The following statement detects if the target device has a high-resolution screen:

{    ...}

Scanning scan

The scan Media feature lets us check the TV's scanning process, which can be staggered interlace or progressive progressive:

{    ...}

Grid grid

The raster parameter is to detect whether the device is a terminal equipment. Includes old phones (non-smartphones), accessible phones (for people with poor eyesight), and Braille devices. It returns a Boolean value when the logic is correct:

{    ...}

As you can see, by using a combination of dimensions and attribute-based queries, we could create complex stylesheets to effectively target a large number of devices and work on them most effectively. This is the most important aspect of media queries: they allow us to configure selectively loaded CSS styles for the feature's device.

Simplified sample Application

Now that we have a basic understanding of media queries, let's continue to create media queries to make the sample site cleaner.

First, integrate the query code that has already been written and move the CSS class into two sets of media query statements:

/*Media Queries*//*For example, desktop devices*/@media screen and (min-width:680px){aside {width:33%; }section.showslisting{width:66%; }}/*For example, medium-width screens or smaller screens in landscape*/@media screen and (max-width:680px), screen and (Orientation:landscape) and (max-width:750px){aside {display:None; }section.showslisting{width:100%; }}

Tidy up a lot! We can continue to add a style to each query block.

Let's review the sample Web site shown in the previous section to optimize the other content for each screen size. The next step is to hide the description of the TV show on the small screen device and shorten the description on the medium screen.

If the descriptive text has a class, this would be handy, so add a class for each instance of the P tag that contains the program description:

< Sectionclass= "Tvshow">    <H3>Show</H3>    <imgsrc= "http://placehold.it/350x150"class= "thumbnail">    <Pclass= "Showdescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</P></ Section>

Let's add new media queries to fit the various screen sizes we want to support and organize the existing size distributions.

The specific width we want to design for Reflow (page re-rendering) is called a breakpoint , and the breakpoint we add cannot be exhaustive: because the device size is large, and new devices constantly appear new screen sizes, it is futile to attempt to target each device with a separate query. A better approach is to evaluate the points in the layout design that require reflow, and then create media queries for those breakpoints. That's the beauty of responsive web design: We can make sure that every device gets the right layout, without having to design each device separately.

Add the following breakpoint and refactor the existing style to:

/*Media Queries*//*For example, older phones*/@media only screen and (min-width:320px){aside {display:None; }section.showslisting{width:100%; }. Showdescription{Display:None; }}/*For example, newer phones*/@ Media only screen and (min-width:480px){}/*For example, small computer screens and larger tablets*/@media only screen and (min-width:768px){. showdescription {text-overflow:ellipsis;Display:Block;White-space:nowrap;width:100px;Overflow:Hidden; }}/*For example, typical desktop monitors or larger tablet devices*/@media only screen and (min-width:992px){aside {width:33%;Display:Block; }section.showslisting{width:66%; }. Showdescription{White-space:Normal;width:125px; }}/*Large Devices, for example Large monitors and TVs*/@media only screen and (min-width:1200px){}

The meaning of these media query statements is clear. They define queries on devices of different screen sizes. As the C in CSS implies, media queries are stacked *: We can create styles based on breakpoints on smaller screen devices and change different properties.

Note that breakpoints on small-screen devices in @media only and (min-width:320px) and breakpoints for medium-screen devices in @media only screens and (min-width:768px), All of the changes are on the Showdescription class: Display text or hide it. All elements are then displayed on the breakpoint on the large screen in @media only screens and (min-width:992px).

A small screen breakpoint generates a layout:

Layout of the middle screen breakpoint generation:
The layout of the size of the medium to large screen breakpoints:

Responsive web-Media queries