медиа-экран и максимальная ширина

Question

Я не слишком много знаю о медиа-запросах, но хочу попытаться создать гибкие div. Я установил DIV для некоторых резолюций:

@media screen and (max-width:768px) { 
    div#zarada p {width:100%; font-size: 14px;} 
    .zaradabox img {display:none;} 
    } 
    @media screen and (max-width:1024px) { 
    div#zarada p {width:38%; font-size: 14px;} 
    } 
    @media screen and (max-width:1280px) { 
    div#zarada p {width:38% } 
    } 
    @media screen and (max-width:1366px) { 
    div#zarada p {width:39% } 
    } 
    @media screen and (max-width:1440px) { 
    div#zarada p {width:42%} 
    } 
    @media screen and (max-width:1536px) { 
    div#zarada p {width:46% } 
    } 
    @media screen and (max-width:1600px) { 
    div#zarada p {width:48% } 
    } 
    @media screen and (max-width:1680px) { 
    div#zarada p {width:50% } 
    } 
    @media screen and (max-width:1920px) { 
    div#zarada p {width:56% } 
    } 

Но если дисплей 1024x600px или ANY, всегда читается ширина: 56% (последний стиль линии) Что я пропустил?

Answer 1

По сути, ваш код, говорящий: «Если это размер экрана, сделать это, пока не достигнет максимального ширины Поскольку ваш наименьшее значение. размер экрана, ваш последний запрос СМИ перекрывая все предыдущих.

Если вам требуется такая специфическая обработка дивы, указать мин ширину в обработке. например

@media only screen and (max-width:768px) { 
    div#zarada p {width:100%; font-size: 14px;} 
    .zaradabox img {display:none;} 
    } 
    @media only screen and (min-width:769px) and (max-width:1024px) { 
    div#zarada p {width:38%; font-size: 14px;} 
    } 
    @media only screen and (min-width:1025px) and (max-width:1280px) { 
    div#zarada p {width:38% } 
    } 
    @media only screen and (min-width:1281px) and (max-width:1366px) { 
    div#zarada p {width:39% } 
    } 

и т. Д. Удачи и дайте мне знать, как это работает!

Answer 2

Вы должны вернуть их (от высшего к низшему):

@media screen and (max-width:1920px) { 
    div#zarada p {width:56% } 
    } 
    @media screen and (max-width:1680px) { 
    div#zarada p {width:50% } 
    } 
    @media screen and (max-width:1600px) { 
    div#zarada p {width:48% } 
    } 
    @media screen and (max-width:1536px) { 
    div#zarada p {width:46% } 
    } 
    @media screen and (max-width:1440px) { 
    div#zarada p {width:42%} 
    } 
    @media screen and (max-width:1366px) { 
    div#zarada p {width:39% } 
    } 
    @media screen and (max-width:1280px) { 
    div#zarada p {width:38% } 
    } 
    @media screen and (max-width:1024px) { 
    div#zarada p {width:38%; font-size: 14px;} 
    } 
    @media screen and (max-width:768px) { 
    div#zarada p {width:100%; font-size: 14px;} 
    .zaradabox img {display:none;} 
    } 

Answer 3

Mobile First - Если вы делаете мобильный сначала, вам никогда не понадобится max-width.

/* this code will be in effect unless from 0px width */ 
    div#zarada p {width:100%; font-size: 14px;} 
    .zaradabox img {display:none;} 


@media screen and (min-width:768px) { 
/* this code will be in effect from 768px width and up */ 
    div#zarada p {width:38%; font-size: 14px;} 
} 

@media screen and (min-width:1024px) { 
/* this code will be in effect from 1024px width and up */ 
    div#zarada p {width:38%; } 
} 

@media screen and (min-width:1280px) { 
/* this code will be in effect from 1280px width and up */ 
    div#zarada p {width:39%; } 
} 

@media screen and (min-width:1366px) { 
/* this code will be in effect from 1366px width and up */ 
    div#zarada p {width:42%;} 
} 

@media screen and (min-width:1440px) { 
/* this code will be in effect from 1440px width and up */ 
    div#zarada p {width:46%; } 
} 

@media screen and (min-width:1536px) { 
/* this code will be in effect from 1536px width and up */ 
    div#zarada p {width:48%; } 
} 

@media screen and (min-width:1600px) { 
/* this code will be in effect from 1600px width and up */ 
    div#zarada p {width:50%; } 
} 

@media screen and (min-width:1680px) { 
/* this code will be in effect from 1680px width and up */ 
    div#zarada p {width:56%; } 
} 

Кроме того, вы всегда должны закончить вы Css линии с ;.
, например. p {width:50%;}