p: datascroller отзывчивый [дубликат]

Функции

mysql_ * были обесценены (как и php 5.5), учитывая тот факт, что были разработаны лучшие функции и структуры кода. Тот факт, что функция была обесценена, означает, что больше не будет сделано усилий для ее улучшения с точки зрения производительности и безопасности, что означает, что она менее надежна для будущего.

Если вам нужно больше причин:

  • mysql_ * функции не поддерживают подготовленные операторы.
  • mysql_ * функции не поддерживают привязку параметров.
  • mysql_ * функции не имеют функциональности для объектно-ориентированного программирования.
  • список продолжается ...
356
задан Quantastical 2 May 2013 в 14:06
поделиться

12 ответов

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- или их комбинации, будьте в курсе порядка ваших правил, имея в виду, что если несколько правил соответствуют одному и тому же элементу, более поздние правила будут отменять предыдущие правила.

495
ответ дан ryanve 25 August 2018 в 01:51
поделиться
Extra small devices ~ Phones (< 768px)
Small devices ~ Tablets (>= 768px)
Medium devices ~ Desktops (>= 992px)
Large devices ~ Desktops (>= 1200px)
0
ответ дан bekzat 25 August 2018 в 01:51
поделиться

Это не вопрос количества пикселей, это вопрос фактического размера (в мм или дюймах) символов на экране, который зависит от плотности пикселей. Следовательно, «min-width:» и «max-width:» бесполезны. Полное объяснение этой проблемы приведено здесь: что такое коэффициент пикселей устройства?

В запросах «@ media» учитываются количество пикселей и соотношение пикселей устройства, что приводит к «виртуальное разрешение», которое вы должны принимать во внимание при разработке своей страницы: если ваш шрифт имеет фиксированную ширину 10 пикселей, а «виртуальное горизонтальное разрешение» - 300 пикселей, для заполнения строки потребуется 30 символов.

5
ответ дан Community 25 August 2018 в 01:51
поделиться

Не нацеливайтесь на определенные устройства или размеры!

Общая мудрость не предназначена для таргетинга определенных устройств или размеров, а для перефразирования термина «точка останова»:

  • сначала создайте сайт для mobile first , используя проценты или ems, а не пиксели,
  • , затем попробуйте в большем окне просмотра и обратите внимание, где он начинает сбой,
  • перепроектируйте макет и добавьте мультимедийный запрос CSS только для обработки разбитых частей,
  • повторите процесс, пока не достигнете следующей точки останова.

Вы можете использовать responsivepx.com , чтобы найти «естественные» точки останова, так как в «точки останова мертвы» от Марка Драммонда .

Использовать естественные точки останова

Затем «точки останова» становятся фактической точкой, в которой ваш мобильный дизайн начинает «ломаться», т.е. перестает быть полезным или визуально приятным. Когда у вас есть хороший рабочий мобильный сайт без медиа-запросов, вы можете перестать беспокоиться о конкретных размерах и просто добавить медиа-запросы, которые обрабатывают последовательно более крупные видовые экраны.

Если вы не пытаетесь привязать дизайн к точный размер экрана, этот подход работает, устраняя необходимость нацеливаться на определенные устройства. Целостность самого дизайна в каждой точке останова гарантирует, что он будет поддерживать любой размер. Другими словами, если раздел меню / содержимого / независимо от того, что его можно использовать в определенном размере, создайте точку останова для этого размера , а не для определенного размера устройства.

См. Lyza Запись Гарднера на поведенческих контрольных точках , а также сообщение Зельдмана о Этане Маркоте и о том, как развивающийся веб-дизайн эволюционировал из интуитивной идеи.

124
ответ дан Dave Everitt 25 August 2018 в 01:51
поделиться

В настоящее время наиболее распространенным явлением является просмотр устройств экрана сетчатки, другими словами: устройства с высоким разрешением и очень высокая плотность пикселей (но обычно размер меньше 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

2
ответ дан Ezequiel Adrian 25 August 2018 в 01:51
поделиться

Если вы хотите настроить таргетинг на устройство, просто напишите min-device-width. Например:

Для iPhone

@media only screen and (min-device-width: 480px){}

Для таблиц

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

Вот несколько хороших статей:

141
ответ дан Fizzix 25 August 2018 в 01:51
поделиться
  1. Я использовал этот сайт , чтобы найти разрешение и разработал CSS для фактических чисел. Мои номера немного отличаются от приведенных выше ответов, за исключением того, что мой css на самом деле попадает на нужные устройства.
  2. Кроме того, этот фрагмент кода отладки сразу после медиа-запроса: Например:
    @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;
      }
    } 
    
    Получил это в Интернете, не помню точно сайт. Добавьте этот элемент отладки в каждый отдельный мультимедийный запрос, и вы увидите, какой запрос применяется.
46
ответ дан MA-Maddin 25 August 2018 в 01:51
поделиться

После работал для меня. На рабочем столе поведение не меняется. Но на планшетах и ​​мобильных устройствах я расширяю навигационную панель, чтобы покрыть большой логотип. Обратите внимание, используйте край (сверху и снизу) столько, сколько нужно для высоты вашего логотипа. Для моего случая верх и низ 60px работал отлично. Проверьте навигационную панель здесь .

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}
2
ответ дан Pratik Khadloya 25 August 2018 в 01:51
поделиться

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

/* 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 */
}
19
ответ дан purvik7373 25 August 2018 в 01:51
поделиться

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

Самый простой способ сделать это чтобы захватить ваш законченный дизайн рабочего стола и открыть его в своем веб-браузере. Медленно сжимайте экран, чтобы сделать его более узким. Соблюдайте, когда начинается дизайн, «ломается» или выглядит ужасно и тесно. В этот момент потребуется точка прерывания с запросом на медиа.

Обычно создается три набора мультимедийных запросов для настольных компьютеров, планшетов и телефонов. Но если ваш дизайн выглядит хорошо на всех трех, зачем беспокоиться о сложности добавления трех разных медиа-запросов, которые не нужны. Сделайте это по мере необходимости.

4
ответ дан Robert Rocha 25 August 2018 в 01:51
поделиться

Лучшие точки останова, рекомендованные 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) {

    }
21
ответ дан Santosh Khalse 25 August 2018 в 01:51
поделиться
  1. Дополнительные небольшие устройства (телефоны до 480 пикселей)
  2. Маленькие устройства (планшеты, 768 пикселей и более)
  3. Средние устройства (большие планшеты для ландшафта, ноутбуки и настольные компьютеры , 992px и выше)
  4. Большие устройства (большие настольные компьютеры, 1200 пикселей и более)
  5. портретные электронные считыватели (Nook / Kindle), меньшие таблетки - минимальная ширина: 481px
  6. портретные планшеты, портрет iPad, пейзажные электронные книги - минимальная ширина: 641px
  7. планшет, альбом iPad, ноутбуки Lo-Res - минимальная ширина: 961px
  8. HTC Ширина устройства: 360 пикселей Высота устройства: 640 пикселей -webkit-device-pixel-ratio: 3
  9. Размер экрана устройства Samsung Galaxy S2: 320 пикселей Высота устройства: 534px -webkit-device-pixel-ratio: 1.5 (min-moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (отношение min-device-pixel: 1.5
  10. Samsung Galaxy S3 - ширина устройства: 320 пикселей - высота устройства: 640 пикселей - соотношение между пикселями и изображениями: 2 (min - moz-device-pixel-ratio: 2), - Старые браузеры Firefox (до Firefox 16) -
  11. Samsung Galaxy S4 ширина устройства: 320 пикселей Высота устройства: 640px -webkit-device-pixel-ratio: 3
  12. LG Nexus 4: ширина устройства: 384px Высота устройства: 592px -webkit-device-pixel-ratio: 2
  13. Asus Nexus 7 ширина устройства: 601px высота устройства: 906px -webkit-min-device-pixel-ratio: 1.331) и (-webkit-max-device-pixel-ratio: 1.332)
  14. iPad 1 и 2 , iPad Mini device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 1
  15. iPad 3 и 4 ширина устройства: 768px высота устройства: 1024px -webkit-device-pixel -ratio: 2)
  16. iPhone 3G-ширина устройства: 320 пикселей Высота устройства: 480 пикселей -webkit-device-pixel-ratio: 1)
  17. iPhone 4: ширина устройства: 320 пикселей -hight: 480px -webkit-device-pixel-ratio: 2)
  18. iPhone 5: ширина устройства: 320px Высота устройства: 568px -webkit-device-pixel-ratio: 2)
17
ответ дан Web Designer cum Promoter 25 August 2018 в 01:51
поделиться
Другие вопросы по тегам:

Похожие вопросы: