Como fazer um website parecer o mesmo em dispositivos móveis e desktop

Você não faz tudo parecer o mesmo em um desktop e um dispositivo móvel. Seria bastante inutilizável em um dos tamanhos de tela se você o fizesse. Uma coisa popular a fazer é chamado de design responsivo. O objetivo do design responsivo é fazer com que tudo pareça bom em todos os dispositivos. O design responsivo mantém as coisas na mesma ordem no DOM. mas isso não significa que tudo estará presente em todas as visualizações. Por exemplo, um cabeçalho horizontal com links de navegação no desktop, pode se transformar em um menu hambúrguer e ter menos opções no mobile.

A maior parte das vezes, no design responsivo, você usa um sistema de grid para ajudar a garantir que as coisas fiquem bem em todas as visualizações (desktop, tablet e mobile). Aqui está um exemplo usando as linhas e colunas de fundação do zurb. Com as linhas de fundação, você obtém 12 colunas por linha visual. Você pode atribuir um número diferente de colunas em cada visualização. Você pode ter um cabeçalho composto por 4 links. Você pode fazer cada link com 3 colunas de largura no desktop, 6 colunas de largura no tablet e 12 colunas de largura no celular. O CSS em cada link se parece com "colunas grandes-3 médias-6 pequenas-12". O resultado será na área de trabalho que você terá 4 links em uma linha horizontal. No tablet você recebe duas filas de dois links. No celular você obtém 4 linhas de 1 link cada.

Seu objetivo é criar boas experiências para o usuário no maior número de dispositivos possível. Isso não vai parecer o mesmo em todos os dispositivos.