Pequeña Elipse saliendo pixeleada en el móvil

ingrese la descripción de la imagen aquíEstoy tratando de guardar una elipse, es muy pequeña. 5px por 5px. Lo guardo como PNG-24 pero en el móvil la elipse se muestra pixeleada. Probé SVG pero el tamaño del archivo es demasiado grande. Cualquier consejo sería muy apreciado!!!

Hola David, bienvenido a GDSE! ¿Podría agregar algunas capturas de pantalla de la elipse y la pixelación de la que está hablando? 5px es muy pequeño. No estoy seguro de cómo puedes tener algo de 5px de ancho sin pixelación. Mencionar qué programas está utilizando también ayudaría.
Gracias CAI. Entonces, lo que estamos tratando de hacer es poner una elipse como una viñeta en Markdown en HTML. Estamos usando el tipo de estilo de lista: "imagen"; La imagen bullet.png es de 5 px por 5 px. Entonces, como es una bala, debe ser muy pequeña. La otra opción es usar la viñeta de descuento estándar, pero debe ser del mismo color que el texto. Queremos usar una bala naranja.
Además, ¿cómo agrego una captura de pantalla?
Puede editar su pregunta y usar el cargador de imágenes para agregar una captura de pantalla. Puede configurar una viñeta para que tenga un color diferente usando CSS. Hay una serie de publicaciones en Stack Overflow que deberían mostrarle cómo hacerlo. Esto por ejemplo.
subió una captura de pantalla ahora. Tuvimos un problema con la sangría cuando cambiamos el color de la viñeta usando css
¿Tengo razón al suponer que está viendo eso en una pantalla retina (u otra pantalla de alta densidad de píxeles)?
sí en un teléfono móvil iphone 6
Una elipse SVG debería salir muy por debajo de los 200 bytes, sin minificar y sin comprimir.

Respuestas (1)

El problema es que está viendo la imagen en una pantalla de alta densidad de píxeles que, como sugiere el nombre, tiene una densidad de píxeles más alta de lo normal. Entonces, lo que crees que es una imagen de 5px x 5px, en realidad se representa en un área de 10px x 10px (o 15px x 15px), de ahí la pixelación.

Normalmente, crearía activos de diferentes tamaños para diferentes densidades de píxeles, generalmente x1, x3 y x3. Pero esto no funcionará, list-style-type: 'image';ya que ninguna de las CSSsoluciones habituales funcionará con él.

Tienes algunas opciones para evitar esto.

CSS con Imágenes

En lugar de usar, list-style-type: 'image';use una imagen de fondo en el liy establezca el list-style-typeen none. A continuación, puede utilizar la background-sizepropiedad y una imagen más grande para compensar la visualización de alta densidad de píxeles.

ul {
    list-style:none;
}

ul li {
    background:url('bullet10px.png') no-repeat left;
    background-size:5px 5px;
}

CSS sin imágenes

Puede usar el :beforeselector para crear un pseudoelemento y establecer su contenido en una viñeta. A continuación, puede cambiar el color o la posición de ese elemento como desee.

ul {
    list-style: none;
}

li { 
    padding-left: 1em; 
    text-indent: -.7em;
}

li:before {
    content: "•";
    color: red; /* or whatever color you prefer */
}

Iconos de fuente

Otra opción puede ser utilizar una fuente de iconos. Yo uso Font Awesome pero hay muchas alternativas.

De los ejemplos impresionantes de fuentes:

<ul class="fa-ul">
    <li><i class="fa-li fa fa-check-square"></i>List icons</li>
    <li><i class="fa-li fa fa-check-square"></i>can be used</li>
    <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
    <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

ingrese la descripción de la imagen aquí

Pequeña Elipse saliendo pixeleada en el móvil
RespuestasAquíPolítica de privacidad1y, 0v