Как масштабировать таблицы в различных разрешениях

Question

Вот мой сайт: http://livyscupcakery.bitballoon.com/

На мобильных версиях (я смотрю на сайт с iPhone 5) таблицы на «Продукты» и «контакт» страницы «Дон t хорошо смотря на что угодно, кроме моего разрешения экрана (~ 2000x1000) в Chrome.

Мне нужна помощь в том, как масштабировать таблицу «Продукты», чтобы она была привязана к коробке вокруг нее и настраивалась на разные разрешения (например, на некоторых разрешениях есть только одна строка, а затем два ряда, а затем три). Опять же, на странице «Контакт» на мобильном телефоне кнопки находятся в строке вместо столбца. Я предполагаю, что эти две проблемы очень похожи и могут быть исправлены с помощью того же кода.

Я начал кодирование пару месяцев назад, и я действительно новичок в этом. Пожалуйста, дайте мне знать, если вам нужен код на сайте, чтобы помочь. Огромное спасибо.

Answer 1

Кажется, что вы пытаетесь сделать ваш сайт отзывчивым.

В этом случае, я бы настоятельно рекомендовал использовать адаптивный веб-основы, такие как Bootstrap, Foundation, Materialize и т.д.

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

Если вы берете мой совет и решаете забрать фреймворк, я бы рекомендовал использовать их сетку вместо таблиц для компоновки вашей страницы продуктов.

Если нет, вы можете посмотреть медиа-запросы here. Его CSS-коды, которые работают только по заданным критериям (например: размеры экрана меньше 500 пикселей в ширину).

Удачи вам.

Answer 2

первым вы можете использовать требование системы

включает Bootstrap пути добавления этого, как в голова вашего файла.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

то для продуктов добавить их в этом коде каждый продукт внутри этого блока.

<div class="col-md-3 col-sm-4"> 
    your product code here ... 
</div> 

Answer 3

Это было бы очень легко с display:table на родительский элемент и display:table-cell на дочерние элементы.

Таким образом, для страницы контактов добавить этот CSS под другие стили:

// apply these styles at max-width:666px 
// or remove the media queries and keep this code instead of your old code. 
// keep in mind that if you use this you may have to adjust a few things 
// for it to look as smooth as possible transition-wise. 

@media only and screen (max-width:666px) { 
    table { 
     display:block; 
     margin:0; 
     margin-top:15px; 
     width:100%; 
    } 
    tbody { 
     width:100%; 
     display:table; 
    } 
    .button2 { 
     top:0px; 
     margin:0; 
    } 
    td.row2 { 
     padding:0; 
     display:table-cell; 
    } 
} 

Имейте в виду, что ваш код не является эффективным для этого, так что я на основе моего кода на код , Основы должны иметь display:table на родительском элементе и display:table-cell на дочерних элементах. Сохраняя все элементы width:100%. Надеюсь это поможет.

Вывод изображения:

который может получить как малые, как: