Изменение размера и перестановка html-css страницы

Question

Как можно изменить значки, изображения и теги на странице html-css, которая поддерживает все виды размера экрана. Я хочу страницу, которая реагирует на все виды размеров экрана. Он должен быть совместим в браузерах PC, Iphone, Ipad.

Можно ли это сделать с помощью адаптивного веб-проектирования?

Если да, как я могу это достичь. Часть кода будет полезна для меня, чтобы понять эту тему.

Answer 1

Да, отзывчивый дизайн - это то, что вы хотите.

Просто добавьте в ваш CSS, если вы хотите изменить свой стиль в зависимости от размера экрана:

@media screen and (max-width: 768px) { 

} 

Это также важно, чтобы привыкнуть к использованию % вместо px для многих ваших ширины. Кроме того, обязательно узнайте наследование дочерних элементов, что важно для использования %. Знакомство с min-width и max-width в CSS тоже хорошо.

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

HTML:

<div class=textbox > 
    This is a textbox 
</div> 
<div class=textbox > 
    This is a textbox 
</div> 
<div class=textbox > 
    This is a textbox 
</div> 

CSS:

.textbox { 
    height: 100px; 
    width: 33.3% 
    text-align: center; 
    float: left; 
} 

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

@media screen and (max-width: 768px) { 

     .textbox { 
      float: none; 
      width: 100%; 
    } 
} 

Answer 2

Вы должны использовать медиа-запрос или загрузку для гибкого веб-проектирования.

медиа-запрос, как следующий за конкретный размер экрана:

@media screen and (min-width: 768px) and (max-width: 1024px) { 

} 

Вы можете найти много для материала для медиа-запроса и самонастройки в Интернете.
Для медиа-запроса. This - хороший товар для понимания. Кроме того, вы можете найти множество гибких шаблонов, доступных в Интернете.