CSS Tutorial: CSS Attribute Media Type

CSS Tutorial: CSS Attribute Media Type

One of the most important features of a style sheet is that it can be applied to multiple media, such as pages, screens, electronic synthesizers, and so on. Certain properties only apply to certain media, for example the "font-size" property only applies to scrollable media types (screens).

To declare a media attribute, you can use @import or @media:

@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}

Media can also be included in the document markup:
<link rel="stylesheet" type="text/css" media="print" href="foo.css">
As you can see, the difference between @import and @media is that the former imports external style sheets for media types, while the latter directly imports media attributes. The usage of @import is @import plus the URL address of the style sheet file and then the media type. Multiple media can share one style sheet, and the media types are separated by the "," separator. The usage of @media is to put the media type first, and the other rules are basically the same as rule-set. The various media types are listed below:

SCREEN: refers to the computer screen.
PRINT: Refers to opaque media used in printers.
PROJECTION: refers to the project to be displayed.
BRAILLE: Braille system, referring to printed matter with tactile effects.
AURAL: refers to an electronic speech synthesizer.
TV: refers to television-type media.
HANDHELD: refers to a handheld display device (small screen, monochrome)
ALL: Applicable to all media.

Use of mobile-friendly @media style

General mobile phone style:

@media all and (orientation : portrait) {
/*Vertical screen*/
}
@media all and (orientation : landscape) {
/*Horizontal screen*/
}

Specify the height style for mobile phones:

@media screen and (max-width: 750px)
@media screen and (min-width: 720px) and (max-width: 960px) {//devices with 720 <= xxx < 960}

Styles set according to different devices:

@media (min-width: 768px) { //> = 768 devices}
@media (min-width: 992px) { //> = 992 devices}
@media (min-width: 1200) { //> = 1200 devices}

Pay attention to the order. If you write @media (min-width: 768px) below, it will be a tragedy, because the CSS file is read from top to bottom, and the latter CSS will have a higher priority.

@media (min-width: 1200) { //> = 1200 devices}
@media (min-width: 992px) { //> = 992 devices}
@media (min-width: 768px) { //> = 768 devices}

Because if it is 1440, since 1440>768 then your 1200 will be invalid.

So when we use min-width, the smaller one is on top and the larger one is on the bottom. Similarly, if we use max-width, the larger one is on top and the smaller one is on the bottom.

@media (max-width: 1199){ //<=1199 devices}
@media (max-width: 991px){ //<=991 devices}
@media (max-width: 767px){ //<=768 devices}

This article ends here

<<:  How to set the text in the select drop-down menu to scroll left and right

>>:  About the solution record of the page unresponsiveness when using window.print() in React

Recommend

MySQL 5.7.20 Green Edition Installation Detailed Graphic Tutorial

First, let’s understand what MySQL is? MySQL is a...

How to set the height of the autosize textarea in Element UI

After setting textarea input in Element UI to aut...

Add a copy code button code to the website code block pre tag

Referring to other more professional blog systems...

Linux remote control windows system program (three methods)

Sometimes we need to remotely run programs on the...

Summary of knowledge points on using calculated properties in Vue

Computed properties Sometimes we put too much log...

How to import, register and use components in batches in Vue

Preface Components are something we use very ofte...

Not a Chinese specialty: Web development under cultural differences

Web design and development is hard work, so don&#...

Supplementary article on front-end performance optimization

Preface I looked at the previously published arti...

Summary of several implementations of returning to the top in HTML pages

Recently, I need to make a back-to-top button whe...

Example of using nested html pages (frameset usage)

Copy code The code is as follows: <!DOCTYPE ht...

Summary of MySQL slow log related knowledge

Table of contents 1. Introduction to Slow Log 2. ...

DIV background semi-transparent text non-translucent style

DIV background is semi-transparent, but the words ...

Vue implements the browser-side code scanning function

background Not long ago, I made a function about ...