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
First, let’s understand what MySQL is? MySQL is a...
After setting textarea input in Element UI to aut...
Referring to other more professional blog systems...
Sometimes we need to remotely run programs on the...
Index definition: It is a separate database struc...
Computed properties Sometimes we put too much log...
Preface Components are something we use very ofte...
Web design and development is hard work, so don...
Preface I looked at the previously published arti...
Recently, I need to make a back-to-top button whe...
Copy code The code is as follows: <!DOCTYPE ht...
Table of contents 1. Introduction to Slow Log 2. ...
1. parseFloat() function Make a simple calculator...
DIV background is semi-transparent, but the words ...
background Not long ago, I made a function about ...