foreword
Our programmers may encounter some projects that need to use responsive layout in their daily work.
Responsive layout can provide users of different terminals with a more comfortable interface and better user experience, and with the popularity of large-screen mobile devices, in order to avoid repeated development, responsive layout is particularly important
Here I will share the solution I used. If there are any mistakes, please advise!
Table of contents
1. Media inquiries
That is, set different CSS styles for devices of different sizes. Let's go straight to the code.
// 屏幕大于240px时的样式
@media (min-width: 240px) {
}
@media (min-width: 320px) {
}
@media (min-width: 360px) {
}
@media (min-width: 375px) {
}
@media (min-width: 384px) {
}
@media (min-width: 411px) {
}
@media (min-width: 414px) {
}
@media (min-width: 424px) {
}
@media (min-width: 480px) {
}
@media (min-width: 540px) {
}
@media (min-width: 640px) {
}
@media (min-width: 720px) {
}
@media (min-width: 750px) {
}
@media (min-width: 768px) {
}
@media (min-width: 800px) {
}
@media (min-width: 980px) {
}
@media (min-width: 1024px) {
}
@media (min-width: 1080px) {
}
@media (min-width: 1152px) {
}
@media (min-width: 1366px) {
}
@media (min-width: 1440px) {
}
@media (min-width: 2160px) {
}Here we can write the css style in {} corresponding to the width of the size.
Two, use rem layout
First write the meta tag in the head tag of our HTML page , the code is as follows:
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no,"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="viewport" content="user-scalable=0,width=device-width, initial-scale=1.0">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no,">
<title>test</title>
</head>
<body>
<noscript>
<strong></strong>
</noscript>
<div id="app"></div>
</body>
</html>Then we create a css file and write the following code at the same time:
@media (min-width: 240px) {
html {
font-size: 32px;
}
}
@media (min-width: 320px) {
html {
font-size: 42.66667px;
}
}
@media (min-width: 360px) {
html {
font-size: 48px;
}
}
@media (min-width: 375px) {
html {
font-size: 50px;
}
}
@media (min-width: 384px) {
html {
font-size: 51.2px;
}
}
@media (min-width: 411px) {
html {
font-size: 54.8px;
}
}
@media (min-width: 414px) {
html {
font-size: 55.2px;
}
}
@media (min-width: 424px) {
html {
font-size: 56.53333px;
}
}
@media (min-width: 480px) {
html {
font-size: 64px;
}
}
@media (min-width: 540px) {
html {
font-size: 72px;
}
}
@media (min-width: 640px) {
html {
font-size: 85.33333px;
}
}
@media (min-width: 720px) {
html {
font-size: 96px;
}
}
@media (min-width: 750px) {
html {
font-size: 100px;
}
}
@media (min-width: 768px) {
html {
font-size: 102.4px;
}
}
@media (min-width: 800px) {
html {
font-size: 106.66667px;
}
}
@media (min-width: 980px) {
html {
font-size: 130.66667px;
}
}
@media (min-width: 1024px) {
html {
font-size: 136.53333px;
}
}
@media (min-width: 1080px) {
html {
font-size: 144px;
}
}
@media (min-width: 1152px) {
html {
font-size: 153.6px;
}
}
@media (min-width: 1366px) {
html {
font-size: 182.13333px;
}
}
@media (min-width: 1440px) {
html {
font-size: 192px;
}
}
@media (min-width: 2160px) {
html {
font-size: 288px;
}
}When using it, you need to introduce the css file we wrote above into the HTML page .
When writing styles for HTML pages, we need to pay attention to using rem instead of our px , here we also need to pay attention to the conversion between rem and px .
If we calculate according to the css we defined above, when the width is 375px , it should be 7.5rem when converted to rem .
###### No more~~~