Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde
Pessoa , estou com problemas em algumas telas , umas grandes, outras de tamanhos médios! Sei que isso se deve ao fato dos códigos se misturarem de acordo com a medida das telas!
A pergunta é, tem como colocar um código pra tudo funcionar direitinho, pq o site é responsivo, mas desfigura em alguns monitores!
Segue a baixo os codigos que estão até aqui!
@media only screen and (max-width : 1024px) and (min-width : 600px) {
.anuncios{
width:550px;
margin-left:120px;
}
}@media only screen and (max-width : 1280px) and (min-height : 800px) {
.anuncios{
width:1000px;
margin-left:-17px;
}
}@media only screen and (max-width : 1440px) and (min-height : 899px) {
.anuncios{
width:1000px;
margin-left:45px;
}
#logo {
width: 231px;
height: 80px;
margin-top: 15px;
margin-left:30px;
} margin-top: 35px;
margin-right:30px;
}
}@media only screen and (max-width : 1600px) and (min-height : 900px) {
.anuncios{
width:1000px;
margin-left:100px;
}
#logo {
width: 231px;
height: 80px;
margin-top: 15px;
margin-left:87px;
} margin-top: 35px;
margin-right:87px;
}
}@media only screen and (max-width : 1680px) and (min-height : 1050px) {
.anuncios{
width:1000px;
margin-left:130px;
}
#logo {
width: 231px;
height: 80px;
margin-top: 15px;
margin-left:120px;
} margin-top: 35px;
margin-right:120px;
}
}@media only screen and (max-width : 1920px) and (min-height : 1080px) {
.anuncios{
width:1000px;
margin-left:220px;
}
#logo {
width: 231px;
height: 80px;
margin-top: 15px;
margin-left:210px;
} margin-top: 35px;
margin-right:210px;
}
}@media only screen and (min-width : 1920px) and (min-height : 1200px) {
#logo {
width: 231px;
height: 80px;
margin-top: 15px;
margin-left:210px;
} margin-top: 35px;
margin-right:210px;
}
.anuncios{
margin-left:225px;
}
}@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
#logo {
width: 231px;
height: 80px;
margin-top: 15px;
margin-left:-10px;
} margin-top: 35px;
margin-right:-10px;
}
.anuncios{
width:500px;
margin-left:120px;
}
.formulario select {
margin-top:20px;
margin-bottom:20px;
float:none;
width: 180px;
cursor: pointer;
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
font-weight: bold;
color: rgb(29,119,162);
height: 40px;
white-space: nowrap;
overflow: hidden;
background-color: white;
border: 1px solid #CCCCCC;
font-size: 14px;
text-align: center;
color: rgb(29,119,162);
-o-text-overflow: ellipsis;
position: inherit;
display: block;
text-indent:20px;
}
.formulario{
margin-top:20px;
margin-bottom:2opx;
}
}@OmarF eu estou usando o codigo acima, configurei para funcionar em varios tamanhos de tela, estou tendo problemas é em saber quais e quantos tamanhos tem
por exemplo
a ferramenta screenfly me da as medidas dos monitores de 10,12,13,15,19,20,24, mas como vou saber a resolução da tela de 32,42,17,14! pq meu site esta configurado só pra essas primeiras, mas as outras como descubro que medidas tem
o de 15 polegadas por exemplo tem 1366x768 e o de 14?! a minha dificuldade é essa
Eu não sei qual o truque o geralmente se usa, mas minha técnica para desenvolver responsivos é o seguinte:
crio um div por exemplo...
**<div class="conteniner">**
aqui dentro crio todo conteúdo do site
**</div>**
No css primeiro faço isso:
Spoiler>
Citar
, :before, *:after {
margin: 0; padding: 0;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%
}
Com isso já previno metade dos problemas de posicionamento, removendo margis padrão e tratando todos elementos como box
Aí para meu conteiner>
Citar
.conteiner {
width: 100%;
margin: 0 auto;
max-width: 1280px
}
1280 é a largura de tela do meu monitor, como eu dei um uma largura fixa de 100% e o máximo que pode alcançar é a largura o meu monitor e a margin para o topo é 0 e para direita e esquerda vão ver automáticas
Assim sendo não preciso me preocupar com resoluções maiores do que a minha porque independente do tamanho for maior com outra pessoa meu site só terá isso de largura máxima e centralizada. E como a largura é 100% se for menor a div conteiner vai se ajustar ao novo tamanho.
Outro truque que desenvolvi para me ajudar no ajuste para resposivo é saber em tempo real qual a largura da tela, quando vou redimensionando a a janela do navegador, assim fica muito fácil saber estipular um media query com o elemento que vai ser tratado.
Veja o código:
Spoiler<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="jquery-3.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
function larguradatela() {
var tamanho = $(window).width();
$('.teste-largura').text('LARGURA : ' + tamanho);
}
$(window).resize(function () {
larguradatela();
});
larguradatela();
});
</script>
</head>
<body>
<div class="teste-largura"></div>
</body>
</html>
#EDIT
Enquanto a devices Desktop não se preocupe, mais ou menos você deve se preocupar mesmo é com esses ajustes que são de dispositivos móveis:
Spoiler/****************************************************************************
* Tablets em modo paisagem
*****************************************************************************/
@media screen and (max-width: 1024px) {
}
/****************************************************************************
* Tablets em modo paisagem ajuste
*****************************************************************************/
@media screen and (max-width: 900px) {
}
/****************************************************************************
* Tablets em modo retrato
*****************************************************************************/
@media screen and (max-width: 768px) {
}
/****************************************************************************
* Tablets em modo retrato ajuste
*****************************************************************************/
@media screen and (max-width: 700px) {
}
/****************************************************************************
* eReaders
*****************************************************************************/
@media screen and (max-width: 600px) {
}
/****************************************************************************
* eReaders ajuste
*****************************************************************************/
@media screen and (max-width: 530px) {
}
/****************************************************************************
* Smartphones
*****************************************************************************/
@media screen and (max-width: 480px) {
}
/****************************************************************************
* Smartphones ajuste
*****************************************************************************/
@media screen and (max-width: 400px) {
}
/****************************************************************************
* Iphone
*****************************************************************************/
@media screen and (max-width: 360px) {
}
/****************************************************************************
* Iphone ajuste
*****************************************************************************/
@media screen and (max-width: 320px) {
}
Por que como você disse monitor de 32 polegadas é relativo, porque quem vai definir a resolução em pixels não é o monitor e sim a placa de video/driver do mesmo
@OmarF, show cara! Deu um pouco de trabalho mas valeu a pena!
Valeu, resolvido
É só ir ajustando cada coisa:
Spoiler
@media screen and (max-width: 1024px) {
/ Ajuste os elementos necessários do layout com a resolução de tela até 1024px aqui /
}
@media screen and (max-width: 768px) {
/ Ajuste os elementos necessários do layout com a resolução de tela até 768px aqui /
}
/ E assim vai ajustando para as resoluções que forem preciso /
E detalhe: No resposivo no caso flex evite dizer que um elemento tal tem px calcule seu tamanho real em %.
Exemplo:
>
Citar
Digamos que meu conteiner seja de 1280px e eu tenho um bloco de 410px. Ao invés de dizer que ela tem 410px eu digo que ela tem 32%
Digamos que meu conteiner seja de 900px e eu tenho um bloco de 410px. Ao invés de dizer que ela tem 410px eu digo que ela tem 55%
É simples veja: 410 dividido por 1280px = 0,3203125