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

Are the value ranges of int(3) and int(10) the same in mysql

Table of contents Question: answer: Reality: Know...

Detailed explanation of MYSQL log and backup and restore issues

This article shares MYSQL logs and backup and res...

Collapsed table row element bug

Let's take an example: The code is very simple...

Detailed explanation of Angular data binding and its implementation

Table of contents Preface What is data binding? T...

Three notification bar scrolling effects implemented with pure CSS

Preface The notification bar component is a relat...

Vue Learning - VueRouter Routing Basics

Table of contents 1. VueRouter 1. Description 2. ...

Detailed tutorial on how to automatically install CentOS7.6 using PXE

1. Demand The base has 300 new servers, and needs...

Using cursor loop to read temporary table in Mysql stored procedure

cursor A cursor is a method used to view or proce...

Example of implementing translation effect (transfrom: translate) with CSS3

We use the translate parameter to achieve movemen...

Vue implements the countdown component for second kills

This article shares the specific code of Vue to i...

Analysis of slow insert cases caused by large transactions in MySQL

【question】 The INSERT statement is one of the mos...

Examples of using provide and inject in Vue2.0/3.0

Table of contents 1. What is the use of provide/i...

Details of using Vue slot

Table of contents 1. Why use slots? 1.1 slot 1.2 ...