Я провел день, обновляя веб-страницу из таблиц, чтобы реагировать на div, результат заключается в том, что страница выглядит точно так же, как и до того, как я начал работать на ноутбуке, но теперь на мобильном телефоне страница является одной длинной идеальной колонкой. Проблема в том, что он не выглядит так здорово на экранах среднего размера, а именно iPad.
Я использовал float:left; display: inline;
float:left; display: inline;
чтобы заставить divs падать друг под другом, когда ширины недостаточно для их размещения, но проблема в том, что большая часть сайта использует 3 столбца. В результате на экранах среднего размера есть экземпляры, в которых 2 divs находятся рядом друг с другом, а третий - на следующей строке, чтобы убедиться, что вы беспорядок вокруг с шириной вашего браузера на этой странице. Я предполагаю, что то, что я ищу, - это способ иметь все три divs либо на одной строке, либо на каждой из них. Я также рад услышать другие идеи.
У меня есть разумные знания HTML, CSS, jQuery, но я действительно потерял, как исправить это без серьезного перелета, который просто не представляется возможным, учитывая сроки.
В итоге я отошел от медиа-запросов, потому что они не дали результатов. jQuery пришел на помощь:
<script>//mobile responsiveness
var width = jQuery(window).width();
function ipad() {
if (width <= 1024 && width >= 768){ //if tablet
//css here
} else if (width < 768){ //if mobile phone
//css here
}
}
jQuery(document).ready(function () {
ipad();//run when page first loads
});
jQuery(window).resize(function () {
ipad();//run on every window resize
});
</script>
Первым шагом будет удаление всех таблиц, поскольку этот метод очень устарел и не дает вам контроля или гибкости, которые вам нужны для разных размеров экрана при использовании мультимедийных запросов.
Я бы выбрал первый подход для мобильных устройств и установил таблицу стилей, как в этом макете.
#re2 {
float: left;
width: 100%; /* by default every column would be 100% width for mobile and in this example anything smaller then 641px wide */
}
Нет необходимости в медиа-запросе, так как это будет для мобильных и всех базовых стилей, то есть все столбцы будут иметь ширину 100%.
Включить стили для размеров экрана выше 641px
@media only screen and (min-width: 641px) {
#re2 {
width: 33.333333%; /* makes this element 1/3 of the overall width for devices above 641px wide */
}
}
Включить стили для размеров экрана выше 1025px
@media only screen and (min-width: 1025px) {
#re2 {
width: 50%; /* makes this element half of the overall width for devices above 1025px wide */
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) { #re1 { width: 66.67%; } #re2 { width: 33.33%; } }
Использование сетки будет легко, например, в twitter bootstrap.
Существуют в основном четыре вида размеров границ экрана: большие, средние, маленькие и очень маленькие. Вы можете проверить образец и иллюстрацию на официальном сайте.
Вам нужно связать файл bootstrap css, а затем добавить класс в свой div.
Про за бутстрап состоит в том, что это легко и быстро. Однако, если вам нужно настроить дизайн, вам нужно написать дополнительный код для него. т.е. используя медиа-запрос в css.
Иногда использование JavaScript для определения ширины экрана или элемента также является опцией. Если вам нужно много разных версий макета, JavaScript лучше.
Ваши divs находятся внутри таблицы td, они должны находиться внутри div оболочки, элемент слева должен плавать влево, а элемент справа должен плавать вправо. Maths - ваш друг, вы говорите правильному div, чтобы плавать влево, а div слева шириной - 100%, поэтому независимо от того, что вы измените размер, он займет 100%, пока не достигнет максимальной ширины, которую вы определили.
<div id="wrapper" style="width:100%;">
<div id="IFloatLeft" style="float:left; width:50%; position:relative;">Left Content</div>
<div id="iFloatRight" style="float:right; width:50%; position:relative;">right content</div>
</div> // end wrapper