mysql_ * были обесценены (как и php 5.5), учитывая тот факт, что были разработаны лучшие функции и структуры кода. Тот факт, что функция была обесценена, означает, что больше не будет сделано усилий для ее улучшения с точки зрения производительности и безопасности, что означает, что она менее надежна для будущего.
Если вам нужно больше причин:
IMO - это лучшие точки останова:
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Редактирование: улучшено, чтобы работать лучше с сетями 960:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
На практике многие дизайнеры конвертируют пиксели в ems, в основном b / c ems лучше обеспечивают масштабирование. При стандартном увеличении 1em === 16px
. Умножьте пиксели на 1em/16px
, чтобы получить ems. Например, 320px === 20em
.
В ответ на комментарий, min-width
является стандартным в «мобильном первом» дизайне, в котором вы начинаете с проектирования для самых маленьких экранов, а затем добавляете постоянно увеличивающиеся медиа запросов, работающих на больших и больших экранах. Независимо от того, предпочитаете ли вы min-
, max-
или их комбинации, будьте в курсе порядка ваших правил, имея в виду, что если несколько правил соответствуют одному и тому же элементу, более поздние правила будут отменять предыдущие правила.
Extra small devices ~ Phones (< 768px)
Small devices ~ Tablets (>= 768px)
Medium devices ~ Desktops (>= 992px)
Large devices ~ Desktops (>= 1200px)
Это не вопрос количества пикселей, это вопрос фактического размера (в мм или дюймах) символов на экране, который зависит от плотности пикселей. Следовательно, «min-width:» и «max-width:» бесполезны. Полное объяснение этой проблемы приведено здесь: что такое коэффициент пикселей устройства?
В запросах «@ media» учитываются количество пикселей и соотношение пикселей устройства, что приводит к «виртуальное разрешение», которое вы должны принимать во внимание при разработке своей страницы: если ваш шрифт имеет фиксированную ширину 10 пикселей, а «виртуальное горизонтальное разрешение» - 300 пикселей, для заполнения строки потребуется 30 символов.
Общая мудрость не предназначена для таргетинга определенных устройств или размеров, а для перефразирования термина «точка останова»:
Вы можете использовать responsivepx.com , чтобы найти «естественные» точки останова, так как в «точки останова мертвы» от Марка Драммонда .
Затем «точки останова» становятся фактической точкой, в которой ваш мобильный дизайн начинает «ломаться», т.е. перестает быть полезным или визуально приятным. Когда у вас есть хороший рабочий мобильный сайт без медиа-запросов, вы можете перестать беспокоиться о конкретных размерах и просто добавить медиа-запросы, которые обрабатывают последовательно более крупные видовые экраны.
Если вы не пытаетесь привязать дизайн к точный размер экрана, этот подход работает, устраняя необходимость нацеливаться на определенные устройства. Целостность самого дизайна в каждой точке останова гарантирует, что он будет поддерживать любой размер. Другими словами, если раздел меню / содержимого / независимо от того, что его можно использовать в определенном размере, создайте точку останова для этого размера , а не для определенного размера устройства.
См. Lyza Запись Гарднера на поведенческих контрольных точках , а также сообщение Зельдмана о Этане Маркоте и о том, как развивающийся веб-дизайн эволюционировал из интуитивной идеи.
В настоящее время наиболее распространенным явлением является просмотр устройств экрана сетчатки, другими словами: устройства с высоким разрешением и очень высокая плотность пикселей (но обычно размер меньше 6 дюймов). Вот почему вам понадобятся специализированные медиа-запросы сетчатки на вашем CSS. Это самый полный пример, который я мог бы найти:
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
/* Large screen, retina, stuff to override above media query */
}
Источник: CSS-Tricks Website
Если вы хотите настроить таргетинг на устройство, просто напишите min-device-width
. Например:
@media only screen and (min-device-width: 480px){}
@media only screen and (min-device-width: 768px){}
Вот несколько хороших статей:
@media only screen and (min-width: 769px) and (max-width: 1281px) { /* 10 inch tablet enter here */
body::before {
content: "tablet to some desktop media query (769 > 1281) fired";
font-weight: bold;
display: block;
text-align: center;
background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
}
Получил это в Интернете, не помню точно сайт. Добавьте этот элемент отладки в каждый отдельный мультимедийный запрос, и вы увидите, какой запрос применяется. После работал для меня. На рабочем столе поведение не меняется. Но на планшетах и мобильных устройствах я расширяю навигационную панель, чтобы покрыть большой логотип. Обратите внимание, используйте край (сверху и снизу) столько, сколько нужно для высоты вашего логотипа. Для моего случая верх и низ 60px работал отлично. Проверьте навигационную панель здесь .
@media (max-width:768px) {
.navbar-toggle {
margin: 60px 0;
}
}
/* 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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
Поскольку существует много разных размеров экрана, которые всегда меняются и, скорее всего, всегда будут меняться наилучшим образом, вы должны основывать свои точки останова и медиа-запросы на вашем дизайне.
Самый простой способ сделать это чтобы захватить ваш законченный дизайн рабочего стола и открыть его в своем веб-браузере. Медленно сжимайте экран, чтобы сделать его более узким. Соблюдайте, когда начинается дизайн, «ломается» или выглядит ужасно и тесно. В этот момент потребуется точка прерывания с запросом на медиа.
Обычно создается три набора мультимедийных запросов для настольных компьютеров, планшетов и телефонов. Но если ваш дизайн выглядит хорошо на всех трех, зачем беспокоиться о сложности добавления трех разных медиа-запросов, которые не нужны. Сделайте это по мере необходимости.
Лучшие точки останова, рекомендованные Twitter Bootstrap
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}