¿Cuál es la diferencia entre pantalla y solo pantalla en consultas de medios??
Esta publicación explicará qué distingue a la "pantalla" de la "única pantalla" en las consultas de los medios.
Lo que distingue la "pantalla" de la "única pantalla" en las consultas de los medios?
"pantalla"Se utiliza para configurar el tamaño de la pantalla dentro de la consulta de medios. Específicamente, el tamaño de la pantalla se puede configurar usando "anchura máxima" y "mínimo"Propiedades CSS. El tamaño de la pantalla difiere de pantalla a pantalla. Por lo tanto, la palabra clave "única" se determina para evitar que los navegadores anteriores usen los estilos proporcionados, ya que no manejan consultas de medios que contienen características de los medios.
Cómo utilizar las consultas de medios "pantalla"?
Para utilizar el "pantalla"En una consulta de medios, consulte las instrucciones enumeradas.
Paso 1: inserte un encabezado
Primero, utilice la etiqueta de encabezado HTML para agregar un encabezado dentro del documento HTML. Por ejemplo, el " Paso 2: Agregar texto en el párrafo A continuación, agregue texto en el párrafo con la ayuda del " Aplicar la regla de @Media Hemos establecido el ancho de la pantalla. Producción Paso 3: Aplicar un estilo en el elemento "cuerpo" Acceda al elemento del cuerpo y aplique las propiedades CSS para el estilo: Para hacerlo, el "color de fondoLa propiedad se utiliza para asignar un color en la parte posterior del elemento. Paso 4: Establezca "pantalla @media" De acuerdo con nuestros requisitos, hemos establecido el ancho de un documento en "300"Píxeles o menos. El color de fondo es "LUCHBLUES". Si no, será "verde". Para hacerlo, utilice el "pantalla de @Media"Y configure el ancho máximo de la pantalla. Después de eso, acceda al cuerpo y aplique las siguientes propiedades de CSS: Aquí: Producción Cómo utilizar las consultas de medios "solo pantalla"? El "solo"La palabra clave restringe que los navegadores apliquen los estilos especificados que no son compatibles con las consultas de los medios con características de los medios. Siga las instrucciones para utilizar el "solo pantalla"En las consultas de los medios. Paso 1: Estilo "cuerpo" Acceder al cuerpo y aplicar el "color de fondo"Para especificar el color en la parte posterior del elemento en la pantalla. Paso 2: Aplicar consulta de medios con "solo pantalla" Ahora, aplique una consulta de medios con "solo pantalla"Para configurar el ancho de la pantalla. Por hacerlo, el valor del "solo pantalla"La propiedad se establece como"400px". Paso 3: Establezca la propiedad de "color de fondo" Cuando hemos establecido el ancho de un documento en "400"Píxeles o menos, el color de fondo es"RGB (17, 97, 202)". De lo contrario, es "RGB (235, 185, 23)". Producción Eso se trata de la pantalla de distinción entre las consultas de medios y solo la pantalla. Conclusión La distinción entre "solo pantalla" y "pantalla"En las consultas de los medios es que el"pantalla"Se emplea para indicar el tamaño de la pantalla de la consulta de medios. El "anchura máxima" y "mínimo"Se puede usar para controlar el tamaño de la pantalla. Como cada pantalla tiene un tamaño de pantalla distinto, el "solo"La palabra clave se usa para evitar implementar los estilos especificados en navegadores anteriores que no permiten consultas de medios. Esta publicación ha explicado la distinción entre "solo pantalla" y "pantalla" dentro de las consultas de los medios.
Color de fondo: verde;
cuerpo
Color de fondo: LightskyBlues;
Color: RGB (226, 12, 12);
Nuevamente, acceda al cuerpo y aplique "color de fondo" de nuevo:
Color de fondo: RGB (235, 185, 23);
@Media Only Screen y (Max-Width: 400px)
cuerpo
Color de fondo: RGB (17, 97, 202);