1.rem basics
rem unit
rem (root em) is a relative unit. Similar to em, em is the font size of the parent element.
The difference is that the benchmark of rem is relative to the font size of the html element.
For example, if the root element (html) is set to font-size=12px; the non-root element is set to width: 2rem; then it is replaced by px to mean 24px.
The advantage of rem is that the overall control can be achieved by changing the size of the elements in the page by modifying the size of the text in the html.
2. Media inquiries
2.1 What is a media query
Media Query is a new syntax for CSS3.
- Using @media query, you can define different styles for different media types
- @media can set different styles for different screen sizes
- When you reset the browser size, the page will be re-rendered according to the width and height of the browser
- Multimedia queries are currently used for many Apple phones, Android phones, tablets and other devices
2.2 Grammar specification
@media mediatype and|not|only (media feature) {
CSS-Code;
}
- Pay attention to the @ symbol at the beginning of @media
- mediatype media type
- Keywords and not only
- media feature must be enclosed in parentheses
1. mediatype query type
Divide different terminal devices into different types, called media types
-
all: for all devices
-
print: for printer and printer preview
-
screen:用于电脑屏幕，平板电脑，智能手机等
2. Keywords
Keywords connect media types or multiple media characteristics together as conditions for media queries.
- and: Multiple media characteristics can be connected together, which is equivalent to "and".
- not: Exclude a certain media type, which means "not" and can be omitted.
- only: Specify a specific media type, which can be omitted.
3. Media Features
Each media type has its own different characteristics. Different display styles are set according to the media characteristics of different media types. Let me introduce three for the time being. Note that they should add parentheses
- width: defines the width of the visible area of the page in the output device
- min-width: Define the minimum visible area width of the page in the output device
- max-width: defines the maximum visible area width of the page in the output device
/*这句话的意思是：在屏幕上 并且 最大宽度是800px 设置样式*/
@media screen and (max-width: 800px) {
body {
background-color: pink;
}
}
2.3 Media query + rem to achieve dynamic size changes of elements
The rem unit follows html. With rem page elements, different sizes can be set
Media query can be modified according to different device width
Media query + rem can achieve different device widths and dynamic changes in page element size
<style>
@media screen and (min-width:320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width:640px) {
html {
font-size: 100px;
}
}
.top {
height: 1rem;
font-size: .5rem;
background-color: pink;
color: #fff;
text-align: center;
line-height: 1rem;
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
2.4 Introducing resources
When there are more styles, you can use different stylesheets for different media.
The principle is to directly determine the size of the device in the link, and then reference different css files.
Grammar specification:
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"