Как сделать так, чтобы сайт выглядел уместно как на «большом экране», так и на экране мобильного устройства?

Для проблемы с масштабированием вы должны добавить метатег для указания значений окна просмотра .

<meta name="viewport" content="width=device-width, initial-scale=1">

Так, например, указать, что ширина мобильного браузера равна ширине экрана самого устройства.

У вас есть дополнительная информация об этом мета-теге на MDN .

Но на самом деле НЕТ простого способа сделать это . И это потому, что это зависит от многих вещей, в основном от того, как построен ваш сайт.

Отзывчивый дизайн

В настоящее время, поскольку существует такое разнообразие разрешений, идеальным является либо использование разных версий Интернета, либо использование адаптивного дизайна ( Responsive Web Design ).

Эти типы дизайна основаны на жидком дизайне (как правило), в котором затем через медиа-запросы указывается в CSS, как дизайн должен вести себя в зависимости от размера экрана.

Очень упрощенным примером будет то, что при разрешении в 1024*768четыре столбца будет видно, а при разрешении в 320*480один столбец будет видно.

Используйте медиа-запросы

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

Каждый медиа-запрос представляет собой логическое выражение, которое может быть истинным или ложным (это похоже на IF).

Есть 3 способа их использования:

Через атрибут «медиа» элемента «ссылка», то есть используя разные файлы .cssдля каждого «варианта» вашей страницы.

 <link rel="stylesheet" media="screen and (width <= 640px)" href="mobiles.css" />
 <link rel="stylesheet" media="screen and (width > 640px)" href="escritorio.css" />
 <link rel="stylesheet" media="print" href="para_imprimir.css" />

Импортируя больше стилей в один файл CSS, как и раньше, вы используете разные файлы CSS для каждого варианта.

 @import url(mobiles.css) screen and (width <= 640px);
 @import url(escritorio.css) screen and (width > 640px);
 @import url(para_imprimir.css) print;

Условное применение стилей в CSS (мой любимый)

.clase {
   // propiedades comunes a todos los medios aqui.
}

@media screen and (width <= 640px) {
  .clase {
    // propiedades para mobiles aqui.
  }
}  

@media screen and (width > 640px) {
  .clase {
    // propiedades de escritorio aqui
  }
} 

@media print {
  .clase {
    // propiedades impresora aqui.
  }
} 

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

@media (orientation:portrait) { 
   // el celular o tableta esta en modo retrato
}

@media (orientation:landscape) { 
   // el celular o tableta esta apaisado
}

Я рекомендую вам прочитать проект медиа-запросов , чтобы узнать, какие другие варианты вам доступны.

Что ж, хотя есть люди, которые говорят, что это непросто, я использую Bootstrap для больших веб-приложений и дополняю его CSS3.

Теперь, если ваше приложение небольшое и хорошо оформлено, @mediaвам будет достаточно пары тегов, меняющих пропорции:

Сначала определите контейнер для вашего html с нужными вам столбцами, это будут адаптивные, а элементы внутри должны иметь относительное положение и размеры в процентах, НИКОГДА С ФИКСИРОВАННЫМИ ПИКСЕЛЯМИ!

Затем определите размер стандартных столбцов, для среднего экрана и для мобильных устройств (представим, что 3 столбца в большом, 2 + 1 в середине и 3 строки в мобильном.

/* Tamaño estandard para escritorio */
.col-1 {width: 33.33%;}
.col-2 {width: 33.33%;}
.col-3 {width: 33.33%;}

@media only screen and (max-width: 768px) {
    /* Moviles y tablets: */
    [class*="col-"] {
        width: 100%;  /* todas las columnas ocupan el 100% creando 3 filas */
    }
}

@media only screen and (max-width: 1499px) and (min-width: 800px) {
    /* tamaño de pantalla mediana / pequeña */
    .col-1 {width: 50.00%;}
    .col-2 {width: 50.00%;}
    .col-3 {width: 100.00%;}
}

И вуаля, просто для ясности, проверьте этот живой пример на скрипке и измените размер экрана, чтобы увидеть 3 макета, которые создаются в зависимости от размера.

ПРИМЕЧАНИЕ. Я добавил в пример дополнительный нижний колонтитул, чтобы дать информацию.

* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}

    /* Tamaño estandard para escritorio */
    .col-1 {width: 33.33%;}
    .col-2 {width: 33.33%;}
    .col-3 {width: 33.33%;}
    
    @media only screen and (max-width: 768px) {
        /* Moviles y tablets: */
        [class*="col-"] {
            width: 100%; /* todas las columnas ocupan el 100% creando 3 filas */
        }
    }
    
    @media only screen and (max-width: 1499px) and (min-width: 800px) {
    	/* tamaño de pantalla mediana / pequeña */
        .col-1 {width: 50.00%;}
        .col-2 {width: 50.00%;}
        .col-3 {width: 100.00%;}
    }

  <body>

<div class="row">

<div class="col-1 menu">
<ul>
<li>El vuelo</li>
<li>La ciudad</li>
<li>La isla</li>
</ul>
</div>

<div class="col-2">
<h1>La ciudad</h1>
<p>texto de ejemplotexto de ejemplotexto de ejemplotexto de ejemplotexto de ejemplotexto de ejemplo</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>QUE?</h2>
<p>texto de ejemplo</p>
<h2>DONDE?</h2>
<p>texto de ejemplo</p>
<h2>COMO?</h2>
<p>texto de ejemplo</p>
</div>
</div>

</div>

<div class="footer">
<p>Para ver como funciona el ejemplo cambia el tamaño del explorador o del area de resultado.</p>
</div>

</body>

Bootstrap , несомненно , является хорошим кандидатом для того, чтобы сделать вашу страницу адаптивной, он очень прост в использовании, вы можете использовать его в «простом html» (без фреймворка), он имеет хорошую документацию, большое сообщество и его общую схему легко понять. понять и использовать.

На самом деле нет простого способа сделать это автоматически с готовой веб-страницей. Вам нужно будет сделать это в соответствии с адаптивным дизайном (или, как его обычно называют, отзывчивым).

По сути, вам придется поиграть с медиа-запросами CSS , где screen является типом мультимедиа для экранов настольных компьютеров и портативных устройств для мобильных устройств.

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

<link media="handheld" type="text/css" href="/css/movil.css" rel="stylesheet">

Итак, тот, который вы уже используете для настольных компьютеров:

<link media="screen" type="text/css" href="/css/index.css" rel="stylesheet">

Для получения дополнительной информации я оставлю вам здесь пару ссылок на испанском языке из Google и Mozilla .

Я хотел бы добавить сюда Foundation Zurb, в его версии 6. Он полностью адаптивен, с множеством дополнений, сеточным дизайном, множеством плагинов javascriptдля мобильных функций, он полностью ориентирован на отзывчивость.

Что я могу вам сказать, это удивительно, он реализует многие из уже ставших модными технологий, а также другие новые. У него довольно много библиотек для модальных окон.

У него также уже есть пакет npmи bowerдля cli, простые предварительно разработанные шаблоны, если вам нужно что-то базовое или полное для тяжелой работы, с файлами, настроенными для gulpили , среди прочего grunt, будут отсутствовать webpack, скомпилированные пакеты sassи .js

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

Я бы также рассказал о таких фреймворках, как Bootstrap, и я бы рассказал об использовании widthy max-widthс процентными значениями в CSS и использовании медиа-запросов.

Единственное, что я хотел бы добавить к другим ответам, касается использования подхода mobile-first .

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap o otro -->
<style>
.ejemplo{font-size:24px}
@media (min-width: 768px){.ejemplo{font-size:36px}}
</style>
</head>

<body>
<div class="ejemplo">Texto texto texto texto.</div>
</body>
</html>

В частности, предпочтите @media (min-width: )вместо того , @media (max-width: )потому что основной стиль предназначен для небольших устройств, а не наоборот:

.ejemplo{font-size:24px}
@media (min-width: 768px){.ejemplo{font-size:36px}}

следует предпочесть

.ejemplo{font-size:36px}
@media (max-width: 767px){.ejemplo{font-size:24px}}

Извините, но я говорю только по-итальянски и использовал Google переводчик :)