prefacio
Nuestros programadores pueden encontrar algunos proyectos que necesitan usar un diseño receptivo en su trabajo diario.
El diseño receptivo puede proporcionar a los usuarios de diferentes terminales una interfaz más cómoda y una mejor experiencia de usuario, y con la popularidad de los dispositivos móviles de pantalla grande, para evitar el desarrollo repetido, el diseño receptivo es particularmente importante
Aquí compartiré la solución que utilicé. Si hay algún error, por favor avise!
Tabla de contenido
1. Consultas de los medios
Es decir, establezca diferentes estilos CSS para dispositivos de diferentes tamaños. Vayamos directamente al código.
// 屏幕大于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) {
}Aquí podemos escribir el estilo css en {} correspondiente al ancho del tamaño.
Dos, usa el diseño rem
Primero escriba la etiqueta meta en la etiqueta principal de nuestra página HTML , el código es el siguiente:
<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>Luego creamos un archivo css y escribimos el siguiente código al mismo tiempo:
@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;
}
}Al usarlo, debe introducir el archivo css que escribimos anteriormente en la página HTML .
Al escribir estilos para páginas HTML , debemos prestar atención al uso de rem en lugar de nuestro px , y aquí también debemos prestar atención a la conversión entre rem y px .
Si calculamos de acuerdo con el css que definimos anteriormente, cuando el ancho es 375px , debería ser 7.5rem cuando se convierte a rem .
###### No más~~~