Conteúdo para você se capacitar em programação
Bem, para ser mais específico. Acabei de descobrir por que algumas pessoas na minha empresa reclamaram que “o trabalho do freelancer parece diferente no meu dispositivo móvel do que na …
Continuar lendoEditar 20 de julho de 2015: Se você quiser que sua tipografia seja dimensionada de maneira diferente (por exemplo: seus títulos e parágrafos não precisam apenas ser dimensionados em 20% …
Continuar lendoQuando você tenta usar a grade responsiva do Twitter Bootstrap com menos estrutura responsive.less, including: { variables.less, mixins.less, responsive-utilities.less, responsive-1200px-min.less, responsive-768px-979px.less, responsive-767px-max.less, responsive-navbar.less} A parte responsiva entre 980 px e …
Continuar lendoUse este pequeno pedaço de CSS para ver quais consultas de mídia estão sendo processadas em seu navegador. É útil para a codificação de designs responsivos. body:after { content: “less …
Continuar lendoRecentemente, escrevi CSS para tornar o Chrome DevTools responsivo. Você pode modificar o CSS do DevTools modificando o Custom.css Usando consultas de mídia, reuni pontos de interrupção nos quais escondi …
Continuar lendoAqui está um snippet Sublime Text2 / 3 de James Nowland que economizará tempo ao codificar um site responsivo usando SASS: <snippet><content><![CDATA[@include breakpoint(${1:papa-bear / mama-bear / baby-bear}) { ${2:}}]]></content> <!– …
Continuar lendoExistem várias maneiras de lidar com consultas de mídia CSS. Aqui estão algumas opções… Consultas em todos os lugares Isso não é muito bom, pois adiciona muito código repetitivo e, …
Continuar lendoCaso você ainda não saiba sobre isso. Eu tentei isso meses atrás sem sorte, mas algumas semanas atrás eu descobri que você finalmente pode usar mixins legais para mixar suas …
Continuar lendoPara direcionar dispositivos de retina usando CSS, é possível fazer uso de uma consulta de mídia com o atributo -webkit-min-device-pixel-ratio. @media only screen and (-webkit-min-device-pixel-ratio: 2) { /*your custom declarations …
Continuar lendoSe você definir um tamanho de fonte padrão em seu CSS (16px, por exemplo), poderá utilizar as medidas em em mais lugares do que apenas os tamanhos de fonte. Verifique …
Continuar lendo@media only screen e (-webkit-min-device-pixel-ratio: 2), apenas tela e (min-resolution: 192dpi) { / * alguns css de alta resolução (Retina) * / } este MQ funciona em Webkits (Safari, Chrome, …
Continuar lendoModernizr.addTest (“mq”, function () { return !! Modernizr.mq (“apenas todos”); }); adiciona: <html class = “mq”> ou no caso de, por exemplo, 7 e 8 <html class = “no-mq”> 🙁
Continuar lendo@media screen and (max-width:8.5in) { html { width:8.5in; } body { font: 9pt/1.5 Arial, sans-serif; } ….} Uma consulta de mídia simples pode simplificar a depuração do estilo de impressão …
Continuar lendoUm tempo atrás, eu tive que criar um tabuleiro de damas responsivo a fluidos. Felizmente, tive permissão para usar consultas de mídia. Eu absolutamente amo nth-child()agora. https://gist.github.com/3933491 O código: // …
Continuar lendo.logo { display: block; width: 100px; height: 80px; text-indent: -9999em; background: url(img/logo.png) no-repeat; background-size: cover; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url(img/logo@2x.png); } @media (max-width: 700px) { width: 75px; …
Continuar lendoUsando este código, você poderá adicionar regras de estilo personalizadas apenas para o iPhone 4 / 4S. Se você deseja direcionar o iPhone 5, consulte este protocolo . Se você …
Continuar lendo