Общие запросы CSS Media Break Points

Я работаю над адаптивным веб-сайтом с запросами CSS Media.

Является ли следующая организация хорошей организацией? Телефон, Ipad (альбомная и портретная), рабочий стол и ноутбук, большой экран

Каковы общие значения для точек прерывания медиа-запросов?

Я планирую использовать следующие точки останова:

  • 320: портрет смартфона
  • 481: Пейзаж для смартфонов
  • 641 или 768???: портрет IPad???
  • 961: IPad Пейзаж/Маленький ноутбук
  • 1025: рабочий стол и ноутбук
  • 1281: Широкий экран

Как вы думаете? У меня есть несколько сомнений как??? точек.

ОТВЕТЫ

Ответ 1

Вместо того, чтобы пытаться настраивать правила @media на определенных устройствах, возможно, более целесообразно использовать их на вашем конкретном макете. То есть, постепенно сокращайте окно рабочего стола браузера и наблюдайте естественные точки останова для вашего контента. Он отличается для каждого сайта. Пока дизайн отлично подходит для каждой ширины браузера, он должен работать довольно надежно на любом размере экрана (и их много и много).

Ответ 2

Я использовал:

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}

Это делает вещи относительно простыми и позволяет вам делать что-то немного по-другому для телефонов в портретном режиме (много времени я нахожу, что мне приходится менять разные элементы).

Ответ 3

Я использую 4 точки останова, но, как сказал ralph.m, каждый сайт уникален. Вы должны экспериментировать. Не существует волшебных точек останова из-за большого количества устройств, экранов и разрешений.

Вот что я использую в качестве шаблона. Я проверяю веб-сайт для каждой точки останова на разных мобильных устройствах и обновляю CSS для каждого элемента (ul, div и т.д.) Не отображается правильно для этой точки останова.

До сих пор это работало на нескольких адаптивных сайтах, которые я сделал.

/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {


}

/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {


}

/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {


}


/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {


}

ОБНОВИТЬ

По состоянию на сентябрь 2015 года я использую лучший. Я обнаружил, что эти контрольные точки медиа-запросов соответствуют большему количеству устройств и разрешений экрана рабочего стола.

Наличие всего CSS для рабочего стола на style.css

Все медиа-запросы на responseive.css: все CSS для отзывчивого меню + медиа-точки останова

@media only screen and (min-width: 320px) and (max-width: 479px){ ... }

@media only screen and (min-width: 480px) and (max-width: 767px){ ... }

@media only screen and (min-width: 768px) and (max-width: 991px){ ... }

@media only screen and (min-width: 992px){ ... }

Обновление 2019: согласно комментарию Хьюго ниже, я удалил максимальную ширину 1999px из-за новых очень широких экранов.

Ответ 4

Это из css-трюков ссылка

/* 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 */
}

/* 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 (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Ответ 5

Я могу сказать, что я использую только одну точку останова на этапе 768 - min-width: 768px для обслуживания планшетов и настольных компьютеров и max-width: 767px для обслуживания телефонов.

Я не оглядывался назад. Это делает гибкую разработку легкой, а не сложной задачей, и обеспечивает разумный опыт работы на всех устройствах с минимальными затратами на время разработки без необходимости опасаться нового устройства Android с новым разрешением, которое вы не учитывали.

Ответ 6

Рассмотрите возможность использования пунктов twitter bootstrap. с таким массовым усыновлением вы должны быть в безопасности...

Ответ 7

Запросы мультимедиа для стандартных устройств

В общем для мобильных, планшетов, настольных и больших экранов

1. Мобильные телефоны

 /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {

    /* Styles */

    }

2. Таблетки

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {

         /* Styles */

    }

3. Настольные компьютеры и ноутбуки

@media only screen 
and (min-width : 1224px) {

    /* Styles */

}

4. Более крупные экраны

@media only screen 
and (min-width : 1824px) {

    /* Styles */

}

Подробно, включая пейзаж и портрет

/* 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 */
    }

    /* Tablets, iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Styles */
    }

    /* Tablets, iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
    }

    /* Tablets, iPads (portrait) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
    /* 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 (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }

Ссылка

Ответ 8


@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/}
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/}
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/}
@media only screen and (min-width : 690px) and (max-width : 800px) {/*--- Tablet portrait ---*/}
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/}
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */}

Ответ 9

Я всегда использую "Рабочий стол" сначала, сначала мобильный не имеет наивысшего приоритета? IE < 8 покажет мобильный css..

normal css here: 

@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {}

иногда некоторые нестандартные размеры. Я не люблю загрузку и т.д.

Ответ 10

Если вы перейдете к своей аналитике Google, вы можете увидеть, какие разрешения экрана используют ваши посетители на веб-сайте:

Аудитория > Технология > Браузер и ОС > Разрешение экрана (в меню выше статистики)

Мой сайт получает около 5000 посетителей в месяц, а размеры, используемые для бесплатной версии responsinator.com, - довольно точное резюме моих посетителей, разрешения экрана.

Это может избавить вас от необходимости быть слишком совершенным.

Ответ 11

Вместо использования пикселей следует использовать em или процент, поскольку он более адаптивный и жидкий, лучше не целевые устройства не нацелены на ваш контент:

HTML5 rockrs read, мобильный первый

Ответ 12

Ваши точки останова выглядят очень хорошо. Я пробовал 768px на планшетах Samsung, и это выходит за рамки этого, поэтому мне очень нравится 961px. Вам не обязательно нужны все они, если вы используете гибкие методы CSS, такие как % width/max-width для блоков и изображений (текст также).

Ответ 13

Сохраняйте ваш код чистым, а таблицы стилей логически разделенными для каждого типа экрана 'media' config...


1) Использование ответа himansu сверху как ссылка: общие CSS Media Queries Break точки
А ТАКЖЕ
2) https://www.w3schools.com/css/css3_mediaqueries.asp

Ваш ответ будет: 

<link rel="stylesheet" media="@media only screen and (min-width : 320px) and (max-width : 480px)" href="mobilePortrait.css">

<link rel="stylesheet" media="@media only screen and (min-width : 481px) and (max-width : 595px)" href="mobileLandscape.css">