Недавно я задал вопрос о разрешении и о том, как я могу это исправить в своем веб-приложении 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"/>
Запрос 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/
Это то, что я сделал на своем веб-сайте, и он работает нормально:
<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>
Я проверил его, изменив размеры моего хромированного окна, а затем применил ширину соответственно. Надеюсь, это может вам помочь.
Этот подход в основном такой же, как при написании CSS без использования медиа-запросов. Вам все равно придется иметь дело с разными размерами окон.
Вам нужно будет изменить размеры ваших изображений и шрифтов, а также изменить их позиции на основе различных размеров экрана, которые вы установили, используя медиа-запросы. Чтобы проверить другой код, вы можете изменить размер окна и перетащить границу и увидеть эффект, если он работает или нет.
А также следуйте инструкциям, которые ** @Quentin ** написал, это поможет
это не совсем правильный подход. вы должны начать свой веб-сайт с помощью гибкой сетки раскладки css, а google - выбрать тот, который вам подходит. это пример жидкой сетки: http://onepcssgrid.mattimling.com/.
Когда вы настраиваете все и разрабатываете, растягиваете свой браузер, а когда дизайн "ломается", добавьте точку останова для медиа-запросов. решая ваши контрольные точки перед разработкой, это не очень хорошая идея.
хорошим инструментом для проверки вашего дизайна может быть: http://bradfrostweb.com/demo/ish/?url=http%3A%2F%2Fwww.mediaqueri.es#random (введите свой url в левом верхнем поле), но я обычно предпочитают растягивать мой браузер вручную.