Таблица стилей только для интеллектуальных устройств

Question

Таблица стилей только для интеллектуальных устройств

0

У меня есть две таблицы стилей, одна - core.css, а другая - tablet-and-mobile.css, как вы можете видеть ниже:

<link rel="stylesheet" type="text/css" href="assets/css/core.css">
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="assets/css/tablet-and-mobile.css" />

Перейдите на сайт www.loaistudio.com и начните изменять ширину выше 1024 пикселей до уровня ниже, чтобы применить таблицу стилей планшета и телефона.

Можете ли вы заметить, что элементы прыгают? это потому, что некоторые из них имеют:

-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;

КАК исправить эту проблему! Мне нужны переходы, чтобы быть на них, но все равно, чтобы предотвратить прыжки?

disinfor 06 дек. 2013, в 22:06

Источник

0

Определите умный .
Oriol 06 дек. 2013, в 21:04
4

Планшеты и мобильные устройства не имеют изменяемых размеров окон браузера. Поэтому это не проблема. В любом случае изменение размера окон браузера не является обычным делом, и о нем действительно не стоит беспокоиться.
Blazemonger 06 дек. 2013, в 21:05
0

Вы совершенно правы, я согласен! Просто это будет шаблон, который мои клиенты будут использовать, чтобы увидеть пример адаптивного веб-сайта, это шаблон, с которым они будут изменять размеры и играть. Пожалуйста, есть ли способ, как я могу это исправить? : /
user2162270 06 дек. 2013, в 21:09
1

@Blazemonger оправдывает свои ожидания: у интеллектуальных устройств нет изменяемых размеров видовых экранов, а реальные пользователи настольных компьютеров не тратят время на изменение размера своего видового экрана, чтобы увидеть, что происходит.
Barney 06 дек. 2013, в 21:13
2

Вы (и, вероятно, все другие разработчики) должны объяснить своему клиенту, что изменение размера браузера не является реальным вариантом использования и также не является целью адаптивного дизайна. Предоставление оптимизированного контента пользователю на каждом устройстве; в этом смысл адаптивного дизайна.
Mathletics 06 дек. 2013, в 21:20
1

@ Математика ваше утверждение ошибочно. Реальные пользователи могут и будут изменять размер своих браузеров. Это адаптивный дизайн. Адаптивный дизайн предоставляет оптимизированный контент для устройства. Для кого-то вполне реалистично ожидать плавного перемещения контента, когда пользователь изменяет размер своего браузера.
disinfor 06 дек. 2013, в 21:24
0

СОГЛАСИТЕСЬ с @disinfor можете ли вы, ребята, помогите мне найти решение, а скорее спорьте по этому поводу. пожалуйста
user2162270 06 дек. 2013, в 21:26

Показать ещё 5 комментариев

Теги:

javascript

jquery

html5

css3

stylesheet

2 ответа

Ещё вопросы

Планшеты и мобильные устройства не имеют изменяемых размеров окон браузера. Поэтому это не проблема. В любом случае изменение размера окон браузера не является обычным делом, и о нем действительно не стоит беспокоиться.
Вы совершенно правы, я согласен! Просто это будет шаблон, который мои клиенты будут использовать, чтобы увидеть пример адаптивного веб-сайта, это шаблон, с которым они будут изменять размеры и играть. Пожалуйста, есть ли способ, как я могу это исправить? : /
@Blazemonger оправдывает свои ожидания: у интеллектуальных устройств нет изменяемых размеров видовых экранов, а реальные пользователи настольных компьютеров не тратят время на изменение размера своего видового экрана, чтобы увидеть, что происходит.
Вы (и, вероятно, все другие разработчики) должны объяснить своему клиенту, что изменение размера браузера не является реальным вариантом использования и также не является целью адаптивного дизайна. Предоставление оптимизированного контента пользователю на каждом устройстве; в этом смысл адаптивного дизайна.
@ Математика ваше утверждение ошибочно. Реальные пользователи могут и будут изменять размер своих браузеров. Это адаптивный дизайн. Адаптивный дизайн предоставляет оптимизированный контент для устройства. Для кого-то вполне реалистично ожидать плавного перемещения контента, когда пользователь изменяет размер своего браузера.
СОГЛАСИТЕСЬ с @disinfor можете ли вы, ребята, помогите мне найти решение, а скорее спорьте по этому поводу. пожалуйста

disinfor · Answer 1 · 2013-12-06T19-31-00.000Z

Я просто ответил на этот вопрос, только наоборот. Вам нужно применить метод -device- call к запросу, чтобы он просто влиял на телефоны и планшеты.

media="screen and (max-device-width: 1024px)"

Если у вас был этот вызов в самом файле CSS, это будет: @media only screen and (max-device-width:1024px) или любая device-width вы хотите настроить таргетинг.

Здесь хороший веб-сайт для запросов устройств: www.stephentgilbert.com/mediaqueries/

Я попробовал это, и он просто перестал применять стили полностью
Я должен был сказать, вам не нужен @media для вашего примера. Вы только что попробовали media="screen and (max-device-width: 1024px)"
Вот еще один сайт, чтобы проверить: css-tricks.com/resolution-specific-stylesheets об обслуживании CSS на основе устройства, а не только ширина браузера

Barney · Answer 2 · 2013-12-06T18-58-00.000Z

0

Корень проблемы - ваше применение переходов ко all свойствам. Дополните эти правила дополнительным transition-property и включите список разделенных запятыми только свойств, которые вы хотите переместить. Например:

transition-property: opacity, max-height;

Это, кстати, сэкономит массу времени!

Barney 06 дек. 2013, в 18:58

1

Могу ли я сделать что-то подобное? свойство перехода: ширина 0,2 с;
user2162270 06 дек. 2013, в 21:19
1

@ Лео абсолютно! Если у вас есть несколько свойств, которые вы хотите перенести, но хотите, чтобы все они имели одни и те же свойства перехода (скорость, замедление), то поможет описанный выше метод.
Barney 06 дек. 2013, в 22:40
0

Но как я могу заставить это работать для всех браузеров?
user2162270 07 дек. 2013, в 14:13
0

Старые браузеры не поддерживают переходы , но использование префиксов, как вы делали в своем примере кода, в некоторой степени уменьшит это.
Barney 07 дек. 2013, в 15:07
0

Таким образом, я в основном добавляю -webkit -, - moz- и т. Д., Прежде чем да?
user2162270 07 дек. 2013, в 15:11
0

Так что это будет что-то вроде-webkit-transition-property: ширина 0,2 с замедление;
user2162270 07 дек. 2013, в 15:11
0

Нет: если вы просто хотите анимировать одно свойство ( width ), вы можете написать transition: width 0.2 ease-out; - вам нужно будет указать только transition-property (а также исходное свойство transition если вы хотите указать несколько свойств для перехода.
Barney 07 дек. 2013, в 16:10

Показать ещё 5 комментариев