Привет! Если вам нужно адаптировать сайт под мобильные устройства без использования медиазапросов (@media) и без применения Bootstrap, вот несколько методов, которые могут помочь:
1. **Flexible Layouts (гибкие макеты)**:
Используйте процентные значения для ширины элементов, а не фиксированные пиксели. Например:
```css
.container {
width: 100%;
}
.sidebar {
width: 25%;
}
.content {
width: 75%;
}
```
2. **Flexbox**:
Flexbox - мощный инструмент для создания адаптивных макетов. Он позволяет автоматически перестраивать элементы в зависимости от доступного пространства.
```css
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 auto;
}
```
3. **Grid Layout**:
CSS Grid Layout предоставляет еще больше возможностей для создания адаптивных макетов.
```css
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
border: 1px solid #ccc;
}
```
4. **Viewport Units**:
Используйте единицы измерения vw (viewport width) и vh (viewport height), чтобы делать элементы адаптивными.
```css
.element {
width: 50vw; /* 50% от ширины экрана */
height: 50vh; /* 50% от высоты экрана */
}
```
5. **Responsive Images and Videos**:
Убедитесь, что изображения и видео масштабируются правильно.
```css
img, video {
max-width: 100%;
height: auto;
}
```
6. **REM и EM единицы**:
Использование REM и EM единиц может помочь в создании адаптивной типографики и отступов.
```css
html {
font-size: 16px; /* 1rem = 16px */
}
.element {
padding: 1rem; /* 16px */
font-size: 1.5rem; /* 24px */
}
```
Эти методы помогут вам сделать сайт адаптивным без необходимости использования медиазапросов или Bootstrap. Однако, для более сложных адаптивных изменений, медиазапросы могут быть более подходящими.
