Você quer criar um design responsivo em seu próximo projeto? Veja como!
Etapa 1: adicione duas linhas de código na seção principal do seu site.
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />Etapa 2: adicione este CSS em sua folha de estilo:
/* DESKTOP */
/* Your desktop CSS goes here. This CSS will affect browsers with a width of 961 pixels or more + all the older browser that's not supporting CSS3. */
/* TABLET */
@media only screen and (min-width: 601px) and (max-width: 960px) {
/* Your tablet CSS goes here. This CSS will only affect devices with a minimum width of 601 pixels and a maximum width of 960 pixels. */
}
/* MOBILE */
@media only screen and (max-width: 600px) {
/* Your mobile CSS goes here. This CSS will only affect devices with a maximum width of 600 pixels. */
}… e pronto! É isso aí! Normalmente, é mais fácil (e mais inteligente) usar largura de porcentagem em seus elementos, em vez de pixels. Isso fará com que o site flutue muito melhor.