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:
Media can also be included in the document markup: SCREEN: refers to the computer screen. 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:
Styles set according to different 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.
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.
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
Table of contents Question: answer: Reality: Know...
1. Implementation principle of Nginx load balanci...
This article shares MYSQL logs and backup and res...
Let's take an example: The code is very simple...
I believe that many people who have used MySQL fo...
Table of contents Preface What is data binding? T...
Preface The notification bar component is a relat...
Table of contents 1. VueRouter 1. Description 2. ...
1. Demand The base has 300 new servers, and needs...
cursor A cursor is a method used to view or proce...
We use the translate parameter to achieve movemen...
This article shares the specific code of Vue to i...
【question】 The INSERT statement is one of the mos...
Table of contents 1. What is the use of provide/i...
Table of contents 1. Why use slots? 1.1 slot 1.2 ...