Вопросы относительно @Media

Хорошо . . . Итак, у меня появился этот веб-сайт, который я использую в качестве инструмента обучения (хотя мне кажется, что я учусь ОЧЕНЬ медленно), но, несмотря на это, я все еще работаю.

В любом случае, этот веб-сайт, на котором я учился, кажется, работает нормально на моем ноутбуке и мобильном телефоне Galaxy S6, но я вижу проблемы на своих планшетах.

Мой первый вопрос: на этом конкретном сайте я играю с градиентным фоном.

Опять же, он отлично отображается на моем ноутбуке и мобильном телефоне, но не отображается на моих планшетах с диагональю 7", 8" (Windows) и 10,1". Есть ли медиа-запрос "один размер, подходящий всем", который я могу/должен использовать? с использованием?

Второй вопрос: если не существует универсального размера, существует ли определенная максимальная ширина, которая может охватывать типичные размеры планшетов?

Третий вопрос: какова рекомендуемая максимальная ширина, которую следует использовать для покрытия настольных компьютеров/ноутбуков, планшетов и мобильных/мобильных телефонов?

Последний вопрос (на данный момент): о какой максимальной ширине мне следует беспокоиться, кроме настольного компьютера/ноутбука, планшетов и мобильных телефонов/мобильных телефонов?

И к вашему сведению.

. . медиа-запросы, которые я использую для этого конкретного сайта, следующие:

 


@media (max-width:50em) {


body {


min-width:192px; /* CSS3 possible, so let it go narrower */


}


#contentWrapper,


#extras {


float:none;


width:auto;


}


#content,


#extras {


margin:0;


padding:1em 0.5em 0;


}


h2 {


font: bold 2.25em 'Merriweather', serif;


padding-bottom:0.66em;


color: #22B6FA;


}


h3 {


color: #000;


}


.testimonial {


padding-top:1em;


color: #000;


border-top:2px solid #22B6FA;


}


#product {


display:inline-block;


max-width:49%;


}


.price {


color: #22B6FA;


text-shadow: 1px 1px 1px #000;


}


}


@media (max-width:660px) {


h1 {


text-align:center;


padding:0;


}


h1 a {


padding:0.33em 0.167em;


font:bold 300%/150% 'Aclonica', sans-serif;


}


h1 span {


display:none;


}


#product {


display:block;


max-width:100%;


}


}


@media (max-width:340px) {


#products {


width:auto;


margin:0 auto;


-webkit-box-sizing:padding-box;


box-sizing:padding-box;


}

Код (разметка): И если эти запросы неверны или имеют проблемы, я был бы признателен за информацию о том, что я делаю неправильно, а также за любые предложения по улучшению/исправлению этого. Заранее благодарим за любой вклад по этому поводу.

. .

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

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

ради. Еще раз спасибо за ваш вклад . . .

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

Если вы создаете фон CSS, используя градиент, подогнать его под любой размер экрана не составит труда, поскольку вы помещаете его в HTML или BODY, и это растягивает ширину экрана независимо от разрешения и размера экрана (я Я предполагаю, что вы не установили какие-либо параметры ширины или размера фона). Если фон вообще не отображается, возможно, используемые вами браузеры его не поддерживают — однако это звучит сомнительно, поскольку большинство современных браузеров так и делают. Если фон появляется, но не покрывает область или имеет неверный формат, значит, дело в вашем коде, и без полной разметки, желательно самого сайта, трудно сказать.

PoPSiCLe, линейный градиент, с которым я играю, находится на BODY без каких-либо спецификаций ширины или размера, и, как я уже говорил изначально, он отображается и работает так, как я ожидал/хотел, как на моем ноутбуке, так и на моем мобильном телефоне.

Он отлично работает, когда я изменяю размер браузера на своем ноутбуке.

Это не работает на трех планшетах разного размера, которые у меня есть.

Вполне возможно, что планшеты — это просто POS-терминал.

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

Судя по ответам здесь, похоже, это не я - для разнообразия.

РЖУ НЕ МОГУ Я думаю, что если что-то работает при изменении размера экрана, то оно будет работать и на устройствах примерно такого же размера.

Возможно, я ошибаюсь.

Ну, вы не включили код градиента, так что это невозможно оценить.



Вы уверены, что те устройства, которые его не показывают, достаточно современны, чтобы показывать на них ту «версию» градиента, которую вы используете? Достаточно ли у них свободной оперативной памяти для создания линейных градиентов? вы используете линейный градиент или играете с изображениями?

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

Сделайте макет рабочего стола, а затем сузьте его, когда он сломается, выясните, где он разрывается, и сделайте новый запрос для настройки макета.

Вспеньте, промойте, повторяйте движения вниз, пока не получится любой размер.

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

Я использую линейный градиент.

У меня нет необходимости и я не могу начинать играть с изображениями в качестве фона.

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

И, наконец, когда я пишу код, мне нужно только настроить мой основной файл CSS с помощью медиа-запроса в перерывах.

Это верно? Огромное спасибо за то, что высказали мнение по поводу этой смертельной тени.

Я ценю ваше мнение и вклад.

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

Еще раз спасибо, Гэри. Я понятия не имел, что градиент разряжает батарею. Возможно, поэтому его используют не так часто. РЖУ НЕ МОГУ Я думаю, что, возможно, в моих интересах было бы просто иметь солидный опыт. Спасибо за распространение информации . . .

Это момент, когда вы создаете минимальный тестовый пример. Создайте базовую HTML-страницу, содержащую, скажем, три элемента div с примерно 25 словами текста.

Назовите их (дайте идентификаторы) test1, test2 и test3. Не установите ширину для одного и установите ширину 75% и 25em для остальных.

Примените свойство градиента к общему DIV. Это все свойства/значения стиля, которые вы делаете.

Теперь у вас есть страница без потенциальных конфликтов, и она проверит ваш синтаксис и поддержку браузера на различных платформах. ваше здоровье, Гэри