É ruim em termos de compatibilidade usar números de pixels em CSS em vez de porcentagens? Que tal resoluções mais baixas? É normal trabalhar com eles em intervalos de 1-100?
Respostas:
Esta é uma pergunta difícil, porque a resposta depende principalmente da sua situação.
Pixels não são tão ruins, eu também os uso principalmente. (Às vezes, até mesmo para tamanhos de fonte.)
Normalmente fixo o elemento de bloco externo do layout por um determinado tamanho (pixels com layouts de largura fixa e porcentagens com layouts fluidos) e nos elementos internos geralmente defino porcentagens sempre que possível.
Existem alguns elementos que simplesmente não podem ser estilizados com porcentagens ou ems, especialmente as coisas mais sofisticadas vindas de designers gráficos que não entendem esses princípios.
Por exemplo: se você tem uma coluna em seu site com um estilo simples, você pode definir sua largura para uma porcentagem facilmente, mas se ela tiver uma imagem de fundo com uma largura específica que não foi projetada com escala em mente, ela só terá uma boa aparência com largura fixa. Nesses casos, você terá que garantir que o resto da página ocupe a largura restante corretamente.
Observe que você pode usar pixels com porcentagens juntos.
Por exemplo, este é um snippet de um dos meus aplicativos da web mais recentes:
min-width: 800px;
width: 80%;
max-width: 1500px;
A escolha também depende de qual design ou layout você deseja alcançar.
Para um layout de largura fixa , os valores de pixel são adequados. Se um designer lhe der uma imagem do Photoshop que contenha coisas realmente sofisticadas que seria extremamente complicado até mesmo pensar em como ela seria redimensionada, você definitivamente deveria escolher.
Se o seu layout precisa ser dinâmico , você deve usar porcentagens para garantir que ele se expanda conforme a resolução muda e você pode usar o trecho de código acima para torná-lo melhor em cenários onde, de outra forma, pareceria insano.
Alguns layouts (por exemplo, imagine se StackOverflow ocupasse todo o espaço) ficariam muito feios em uma largura de, por exemplo, 1920 pixels - a largura das linhas seria tão absurdamente alta que seria extremamente inconveniente de ler.
É para isso que max-widthserve. Mesmo em alguns layouts dinâmicos, você terá que limitar a largura máxima do seu site para maximizar a usabilidade e legibilidade.
E também leve em consideração as telas menores.
É verdade que ninguém usa mais um desktop 800 × 600, mas muitas pessoas navegam na web com dispositivos móveis de resolução ainda menor.
Isto é para que min-widthserve: fazer com que seu layout expandido dinamicamente pareça menos congestionado em resoultions menores.
Eu espero que isso ajude.
EDITAR:
The Smashing Book tem alguns pensamentos muito bons sobre o assunto.
EDIT 2:
Não quero que minha postagem pareça que quero que você force o dimensionamento baseado em pixels para seus visitantes.
(Aparentemente, algumas pessoas nos comentários me interpretaram mal dessa forma.)
Para esclarecer:
Acredito que o layout ideal é aquele que se ajusta bem a qualquer resolução ou configuração possível.
No entanto, nem sempre podemos fazer tudo perfeitamente. Tempo / recursos e o público-alvo são a chave para determinar se o seu site requer essa funcionalidade avançada ou não.
Estou sugerindo que você use a coisa certa para o trabalho dado.
Se você estiver desenvolvendo um site que terá uma porcentagem significativa de visitantes que requerem ajustes mais avançados, pode valer a pena.
(Claro, às vezes nós apenas fazemos isso por nós mesmos para ter a sensação de fazer as coisas da maneira certa, mas nem sempre é uma decisão financeiramente sólida.)
Ainda assim, você deve fazer uma pesquisa adequada sobre que tipo de site será, quem serão os visitantes e coisas assim, antes de decidir sobre layouts e se vale a pena torná-los mais fluidos ou dinâmicos.
Todas as medições têm seus próprios objetivos:
Use pixels para coisas baseadas em pixels , como bordas. Você provavelmente não quer uma borda que termine com 1,3422 pixels de largura.
Use medidas centradas em texto (em, ex) para coisas baseadas em texto , como áreas de conteúdo, rótulos e caixas de entrada. É uma maneira fácil de garantir que haja espaço para texto de um determinado comprimento e largura.
Use porcentagens para coisas baseadas em janela , como colunas.
Existem exceções, é claro. Por exemplo, você pode especificar uma largura mínima da coluna em pixels. Mas siga o acima e suas páginas serão bem dimensionadas. SEMPRE amplie e afaste suas páginas para ver como elas funcionam com diferentes tamanhos de fonte e formatos de navegador - não se surpreenda mais tarde.
Acho que você deve primeiro entender os problemas que existem ao trabalhar com pixels em CSS:
eme outros tamanhos relativos, respeitará a decisão dos usuários que alteram isso. Isso é especialmente importante em sites com muito texto, especialmente se houver usuários mais antigos. Por outro lado, se o design de um site é importante, acho que é possível e justificável usar pxpara especificar tamanhos de fonte sem quebrar a usabilidade.No final, você precisa tomar a decisão sozinho, e isso depende das circunstâncias exatas, mas acho que não há problema em especificar o tamanho das fontes em pixels .
A propósito, ao trabalhar com empara especificar o tamanho da fonte, é uma boa ideia definir o bodypara font-size: 62.5%. Isso significa que o tamanho da fonte base é 10px, então 1em é 10px, 1.6em é 16px e assim por diante, tornando mais fácil pensar em pixels ao projetar usando ems . Ainda acho frustrante trabalhar assim, especialmente quando os valores do ems estão em cascata. Existem alguns sites muito úteis como o PXtoEM.com que ajudam com isso.
A tela é um layout baseado em pixels , então pixels são uma escolha intuitiva para muitas coisas. O principal problema aqui é que diferentes usuários têm diferentes tamanhos de tela . Como outros apontaram, usar min-widthe max-widthem pixels junto com widthem porcentagem é uma maneira útil de respeitar o tamanho da tela, evitando que seu site seja excessivamente comprimido ou esticado em janelas muito pequenas e muito grandes.
No entanto, eu geralmente evitaria essa abordagem em favor de consultas de mídia CSS . Você pode então usar pedaços de largura fixa e tornar o layout mais amplo (entre outras coisas) conforme o tamanho da tela aumenta. No entanto, as consultas de mídia CSS, como todas as tecnologias interessantes da web, sofrem com a falta de suporte do navegador. Mais notavelmente, o IE8 e anteriores não os suportam, embora haja correções de JavaScript. Por outro lado, o iPhone e outros dispositivos portáteis os suportam, e eu os recomendo fortemente se você quiser que seu site tenha uma boa aparência nesses dispositivos.
Acho que grades de largura fixa são boas . Os sistemas de grade de largura fixa como o 960 Grid System são populares por si só, e há tantos outros sites que têm uma largura fixa, que duvido que você ouviria muitas reclamações se fizesse isso. Dispositivos portáteis que não possuem telas grandes são um problema, mas é aqui que as consultas de mídia CSS devem ser usadas, portanto, é possível especificar tudo em pixels e ter seu site com uma aparência bonita no desktop e no iPhone.
Em última análise, tudo depende de quem são seus usuários, do que você precisa de suporte e de como deseja que seu site se pareça, mas não há nada inerentemente errado em usar pixels em CSS .
Isso depende do que você está estilizando. Para colunas, por exemplo, a largura provavelmente deve depender do tamanho do texto para garantir que terá uma aparência ideal em várias resoluções / telas. Se você deseja dividir sua página em duas partes, você deve usar porcentagens. Mas se você quiser uma borda de 1px entre essas duas partes, independente da resolução, use pixels.
Basicamente, depende de quem está contratando você e consequentemente do público de seu trabalho. Para fins institucionais (onde o conteúdo deve prevalecer sobre a forma, como um projeto do governo), é melhor trabalhar com .em ou%, eles são mais difíceis de controlar, mas serão realmente amigáveis em termos de acessibilidade.
Se falamos de sites corporativos (onde a forma é o negócio) pixel será uma ferramenta mais precisa para atender às expectativas do cliente em relação à sua marca. Uma interface líquida (%, .em) é sempre uma boa coisa quando é feita de forma inteligente, mas não se esqueça de verificar seu projeto em condições extremas e ter certeza de que será estável.
Se você trabalha com pixels, terá controle absoluto sobre a aparência final do seu site, mas terá que assumir a impossibilidade de algum usuário operar com eficiência.
Melhor opção: ao invés de desenhar um Website compatível para todas as plataformas (o que resultará em um design multifacetado) sugira aos seus clientes versões especiais do site adaptadas a cada demanda, o que é uma melhor prática e um melhor negócio também para um designer. ..
Eu diria para evitá-lo, se possível, exceto em certos casos.
Por exemplo, para uma borda fina, basta especificar 1px.
Também para atributos de estilo max-e min-está ok. Mas então faça com que o atributo não máx. / Mín. Seja uma porcentagem, se possível.
max-e min-propriedades.
Esta é realmente uma boa pergunta que já fiz muitas vezes. Não sendo um web designer hardcore (estou mais no lado do desenvolvimento), geralmente pergunto aos designers com quem trabalho sobre suas opiniões, e aqui está o que destilei:
Usar porcentagens versus pixels para dimensionar elementos e assim por diante é realmente uma questão de gosto pessoal ou dos requisitos de cada caso específico. Se você precisar escalonar, ou se for bem dimensionado, use porcentagens. Caso contrário, use pixels. As pessoas aqui têm usado os exemplos de colunas principais em uma página que talvez precisem ser fluidas, mas as bordas podem precisar da precisão de uma medição de pixel.
Obviamente, o tamanho das imagens está muito ligado à sua resolução e unidades de pixel, então eu sempre as uso neste caso.
No entanto, usar tamanho em em comparação com tamanho de pixel ou mesmo tamanho de ponto para texto é uma chaleira de peixes totalmente diferente. A maioria dos caras com quem trabalho tem um estilo base de redefinição para tamanhos de fonte que reduz o tamanho de 1em para cerca de 12px. Em seguida, eles usam o ems em qualquer outro lugar (ou o mais próximo possível de qualquer outro lugar) para dimensionar elementos de texto, controles de formulário e assim por diante. É assim que funciono agora, pois parece funcionar bem em uma variedade de navegadores, sistemas operacionais e DPIs em desktops e laptops. Não posso garantir dispositivos móveis.
Acessibilidade é a chave - se você precisa fazer algo utilizável para pessoas com deficiência ou trabalhar em uma variedade de dispositivos, mesmo coisas que você considere antigas, então o dimensionamento será um requisito. Construa-o em seu modelo para projetar o site desde o início e você perceberá que o tamanho absoluto de pixels nem mesmo é necessário nesse caso.
Por exemplo, um design com muita arte provavelmente será projetado em uma única escala, mas o novo site educacional para usuários com deficiência terá que funcionar em uma variedade de situações.
Lembre-se de que o W3C colocou uma variedade de métodos de dimensionamento e dimensionamento em suas especificações por um motivo - flexibilidade. Faça o que for melhor e mais adequado para o seu público (como Moustard disse antes).
Não sou especialista em css / html, mas a convenção que uso é usar pixels para os contêineres externos e porcentagens para os objetos internos.
Outra regra que tenho com qualquer pessoa que analisa meu layout é uma regra de três pixels . É raro que tudo se alinhe exatamente em todos os navegadores existentes. Concordamos que o esforço supera os benefícios de mover qualquer coisa com três pixels ou menos.
Faça a coisa certa por padrão. Se um usuário visitar seu site com o javascript desabilitado e sem cookies de preferência, você deve fornecer a ele uma página da web que seja o mais funcional e acessível possível.
Sua folha de estilo padrão não deve assumir nada sobre a janela do navegador e ainda renderizar uma página funcional, por mais horrível, com resolução de até 320x320 e tamanhos ilimitados. Se a fidelidade fotográfica é tão importante que você não pode confiar no dimensionamento do navegador, e às vezes é, então você deve usar medidas de pixel (pelo menos no mínimo) para elementos que encapsulam imagens de tamanho fixo, para se certificar de que você não acabará com coisas importantes sendo encobertas. Especificar larguras mínimas junto com porcentagens deve dar a você o controle de que você precisa, ao mesmo tempo que dá aos usuários a acessibilidade de que precisam. Mesmo que a acessibilidade não seja um problema agora, será mais tarde se o site for bem-sucedido.
Quando você faz saber mais sobre a janela do navegador, então não há problema em usar larguras fixas em folhas de estilo alternativas, se a importância de preservar os justifica projeto o trabalho acrescentou.
Se você está almejando um tamanho fixo, os pixels são adequados. Mas se você quiser que seu layout tenha uma boa aparência em várias resoluções / tamanhos de tela, deve se ater a medidas mais relativas, como porcentagens. A maioria das pessoas tem como alvo o último.
Tudo bem se isso for o necessário para agradar seu cliente. Na maioria das vezes, você não consegue equilibrar a quantidade de espaço em diversos tamanhos de tela com apenas porcentagens. Consultas de mídia CSS3 ajudam aqui, mas a adoção ainda é problemática.
Eu prefiro pixel na maioria dos casos. Por exemplo - largura padrão de áreas de conteúdo: 960px. Em "1024" ficará ok, com pequenos espaços livres em ambos os lados da tela. Coloque algum gradiente ou fundo lá. Em "1280" ou "1440" ou "1680", ou qualquer outra coisa - haverá uma lacuna cada vez maior, mas ficará bem. Sim, para 800 - este site vai ser feio. Mas quem se importa? Todos os principais jogadores abandonaram o suporte para 800. Existem muito poucas pessoas com esta resolução
Existem muitos sites diferentes, onde %% será uma solução muito melhor, no entanto.
Os blocos de construção de uma tela são pixels. Você não pode errar com tamanhos de pixels fixos. Como outros pôsteres mencionaram, você também pode usar porcentagens ou "em" s para um substituto escalonável.