Desenho sensível com pesquisa multimédia: Tamanho do ecrã?
Como podem ver nesta tabela, há muita resolução diferente mesmo para um único tipo de dispositivo. E como a resolução está se tornando cada vez maior em dispositivos móveis, é difícil saber que projeto aplicar para uma resolução específica.
Por agora, estou a usar isto.Primeiro Móvel
@ecrã Multimédia e (largura mínima: 720px) = > Phablet
@ecrã Multimédia e (min-Largura:768px) = > comprimido
@ecrã Multimédia e (min-width:1024px) = > Ecrã
Obrigado por qualquer conselho ou recomendação !5 answers
A web design Responsive (RWD) é uma abordagem de Web design destinada a criar sites para proporcionar uma experiência óptima de visualização
Quando você projetar o seu site responsivo você deve considerar o tamanho do ecrã e não o tipo de dispositivo. As perguntas dos media ajudam-no a fazer isso.
Se quiser alterar o seu site por dispositivo, pode usar o valor {[[0]}, mas isto não é recomendado, uma vez que terá de trabalhar arduamente para manter o seu código para novos dispositivos, novos navegadores, versões de navegadores etc, enquanto ao usar o tamanho da tela, tudo isso não importa.
Pode ver algumas resoluções padrão nesta ligação.
Mas , na minha opinião, você deve primeiro projetar o layout do seu site, e só então ajustá-lo com consultas de mídia para caber possíveis tamanhos de tela.
Porquê? Como eu disse antes, a variedade de resoluções de tela é grande e se você vai projetar uma versão móvel que é direcionada para 320px seu site não será otimizado para 350px telas ou telas 400px.DICAS
- ao desenhar uma página sensível, abra-a no seu navegador de secretária e altere a largura do navegador para ver como a largura do ecrã afecta a sua disposição e estilo.
- Use a percentagem em vez de pixels, isso tornará o seu trabalho mais fácil.
Exemplo
Tenho uma mesa com 5 colunas. Os dados parecem bons quando o tamanho da tela é maior que 600px então eu adiciono um ponto de paragem em 600px e esconde uma coluna menos importante quando o tamanho do ecrã é menor. Dispositivos com telas grandes, tais como desktops e tablets irão exibir todos os dados, enquanto os telefones celulares com telas pequenas irão exibir parte dos dados.Estado de espírito
Não directamente relacionado com a questão, mas aspecto importante na concepção sensível. Design responsivo também se relaciona com o fato de que o usuário tem um estado diferente de espírito ao usar um telefone celular ou um desktop. Por exemplo, quando
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
As larguras do ecrã Bootstrap v3.x As utilizações são as seguintes:
-
Extra small devicesTelefones(<768px)/.col-xs- -
Small devicesComprimidos(≥768px)/.col-sm- -
Medium devicesecrãs(≥992px)/.col-md- -
Large devicesecrãs(≥1200px)/.col-lg-
Para grandes sites eu uso Bootstrap e às vezes (para sites simples) eu crio todo o estilo com alguns @mediaqueries. É muito simples, basta pensar todo o código em porcentagem.
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
Dentro do recipiente, a sua estrutura deve ter larguras em percentagem como esta...
.col-1 {
width: 40%;
float: left;
}
.col-2 {
width: 60%;
float: left;
}
@media screen and (max-width: 320px) {
.col-1, .col-2 { width: 100%; }
}
Em algumas interfaces simples, se você começar a desenvolver o projeto desta forma, você terá grandes chances de ter um local totalmente sensível usando pontos de ruptura apenas para ajustar o fluxo de objetos.
Vou providenciar o meu porque a solução de @muni foi um pouco exagerada para mim
Nota: Se quiser adicionar definições personalizadas para várias resoluções em conjunto, diga algo do género:
//mobile generally
@media screen and (max-width: 1199) {
.irns-desktop{
display: none;
}
.irns-mobile{
display: initial;
}
}
Não se esqueça de adicionar essas definições em cima das definições precisas, para que se desloque correctamente (por exemplo, 'retrato de smartphone' deve ganhar versus 'celular em geral')
//here all definitions to apply globally
//desktop
@media only screen
and (min-width : 1200) {
}
//tablet landscape
@media screen and (min-width: 1024px) and (max-width: 1600px) {
} // end media query
//tablet portrait
@media screen and (min-width: 768px) and (max-width: 1023px) {
}//end media definition
//smartphone landscape
@media screen and (min-width: 480px) and (max-width: 767px) {
}//end media query
//smartphone portrait
@media screen /*and (min-width: 320px)*/
and (max-width: 479px) {
}
//end media query