Использование CSS Media Queries

0

Недавно я задал вопрос о разрешении и о том, как я могу это исправить в своем веб-приложении ASP.NET.

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

Я установил свой документ CSS следующим образом:

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

@media only screen and (min-width: 641px) and (max-width: 800px) {
}

@media only screen and (min-width: 801px) and (max-width: 1024px) {
}

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

Я развиваюсь в 1600x800, и мне интересно, как узнать, что мне нужно, чтобы изменить размеры объекта. Нужно ли мне снова разрабатывать приложение в меньшем браузере или есть более простой способ.

HTML:

<link rel="stylesheet" type="text/css" href="Style/StyleSheet.css"/>
Теги:
media-queries

5 ответов

0

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

Вы можете проверить, изменив размер своего окна браузера, или вы можете использовать расширение браузера, чтобы проверить свою работу

Гугл Хром:
https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en
Fire Fox:
https://developer.mozilla.org/en/docs/Tools/Responsive_Design_View
Opera:
https://addons.opera.com/en/extensions/details/responsive-web-design-tester/?display=en
Сафари:
http://www.midwinter-dg.com/downloads_safari-extension_responsive-resize.html

Чтобы узнать больше о медиа-запросах css, посетите: http://letsdopractice.com/css-media-queries/

Поделиться
0

Это то, что я сделал на своем веб-сайте, и он работает нормально:

<head>
<meta name="viewport" content="width=device-width">
<style>
@media screen and (max-width:1900px)
{
    #content{
        margin-left:251px;
        margin-top: -197px;
    }
}
@media screen and (min-width: 420px) and (max-width: 1000px) {
    #sidebar {
        margin-left: -30px;

    }
    #content{
        margin-left:221px;
        margin-top: -197px;
    }

    #separator
    {
        height: 50px;
    }

}
</style>
</head>

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

Поделиться
  • 0
    Если вы не видите, как ваш CSS применяется, пожалуйста, убедитесь, что ничто другое не переопределяет его. В противном случае ваш код в порядке.
0

Этот подход в основном такой же, как при написании CSS без использования медиа-запросов. Вам все равно придется иметь дело с разными размерами окон.

  1. Перетащите границу окна, чтобы уменьшить размер браузера.
  2. Посмотрите, как выглядит дизайн
  3. Настройка CSS
  4. Обновите страницу
Поделиться
  • 0
    Когда я запускаю свою программу и перетаскиваю окно, как узнать, к какому размеру она относится?
  • 0
    В браузере Firefox у вас есть возможность просматривать веб-страницу в разных размерах окна. Вы можете использовать эту опцию «отзывчивый дизайн». В Chrome также, когда вы уменьшаете размер окна, вы можете навести курсор на элементы div, чтобы увидеть их реальный размер.
Показать ещё 6 комментариев
0

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

А также следуйте инструкциям, которые ** @Quentin ** написал, это поможет

Поделиться
0

это не совсем правильный подход. вы должны начать свой веб-сайт с помощью гибкой сетки раскладки css, а google - выбрать тот, который вам подходит. это пример жидкой сетки: http://onepcssgrid.mattimling.com/.

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

хорошим инструментом для проверки вашего дизайна может быть: http://bradfrostweb.com/demo/ish/?url=http%3A%2F%2Fwww.mediaqueri.es#random (введите свой url в левом верхнем поле), но я обычно предпочитают растягивать мой браузер вручную.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню