Как сделать на весь экран сайт: Как сделать что сайт был на весь экран? — Хабр Q&A

Сайт 

css — Html страничка полностью во весь экран мобильного устройства, как реализовать?

Задать вопрос

Вопрос задан

Изменён 10 дней назад

Просмотрен 2k раз

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

Выставляю стили для body, но открываю на мобильном и сайт открывается не так как надо, ниже прикреплю 2 картинки как нужно и как сейчас.

html {
  min-width: 1280px;
}

body {
  margin: 0;
  min-width: 1280px;
  font-size: 14px;
  text-align: center;
  color: #000000;
  font-family: 'Open Sans', sans-serif;
  font-weight: normal;
}

body * {
  box-sizing: border-box;
}
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>default title</title>
  <meta content="" name="description">
  <meta content="" name="keywords">
  <meta name="viewport" content="width=device-width, initial-scale=1. 0" />

  <!--[if (gt IE 9)|!(IE)]><!-->
  <link href="static/css/main.css" rel="stylesheet" type="text/css">
  <!--<![endif]-->

  <meta property="og:title" content="" />
  <meta property="og:url" content="" />
  <meta property="og:description" content="" />
  <meta property="og:image" content="" />
  <meta property="og:image:type" content="image/jpeg" />
  <meta property="og:image:width" content="500" />
  <meta property="og:image:height" content="300" />
  <meta property="twitter:description" content="" />
  <link rel="image_src" href="" />
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:100,200,300,400,500,600,700&amp;subset=cyrillic" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=cyrillic" rel="stylesheet">
  <link href="https://stackpath.


 
  
 bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEh4Sl0sibVcOQVnN" crossorigin="anonymous">

</head>

Изображения, как сейчас открывается и как нужно, чтобы открывался, устройство iphone 5s

PS: Правильное отображение можно получить только зумированием сайта

  • html
  • css
  • css3
  • html5

17

Используете медиа-запросы. Советую использовать Grid (Адаптивная сетка). Ссылка: тык.

  // Ландшафтный экран телефоны
  @media (max-width: 480px) { ... }
 
  // От ландшафтного экрана телефона до потретного планшета
  @media (max-width: 767px) { ... }
 
  // От портретного планшета до ландшафтного экрана и настольных дисплеев
  @media (min-width: 768px) and (max-width: 979px) { ... }
 
  // Большой дисплей
  @media (min-width: 1200px) { .
 
 .. }

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

html — Адаптивная высота на весь экран для каждого блока

Задать вопрос

Вопрос задан

Изменён 3 года 5 месяцев назад

Просмотрен 712 раз

Как сделать чтобы высота бэкграунда растягивалась при увеличении высоты окна браузера? Паддингами не вариант, так как сайт с горизонтальной прокруткой, ниже есть скриншот как всё это выглядит в полноэкранном режиме, нужно чтобы бэкграунд растягивался при нажатие f11 например. Перепробывал уже все свойства у бэкграунда.

<article>
    <div>
        <div>
            <div>
                <img src="img/logo.png" alt="logo">
                <h2>SM-Marketing</h2>
            </div>
            <div>
                <div>
                    <h3>Методика №1</h3>
                    <p>по скоростному получению клиентов из интернета</p>
                    <p>или <br> как с полного нуля, <br> всего через пару дней <br> начать получать первые заявки</p>
                </div>
                <div>
                    <div><div>как найти новых клиентов</div></div>
                    <div><div>как получать больше заявок</div></div>
                    <div><div>как построить систему лидогенерации</div></div>
                </div>
            </div>
        </div>
    </div>
</article>

Ниже css

. slider__item 
    width: 100%
    height: 100%
.header
    background: url(../img/header_bg.png)
    background-repeat: no-repeat
    padding: 70px
    padding-bottom: 170px
    background-position: center
    background-size: 100% 100%
.wraper
    max-width: 1200px
    margin: 0 auto   
.logo
    display: flex

  • html
  • css
.slider__item
    min-height: 100vh

ну и ковер, что в посте выше

1

Для растягивание используйте background-size: cover также можете задать min-height к шапке.

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Полная статья https://css-tricks.com/perfect-full-page-background-image/

А также советую прочитать: https://www.w3schools.com/css/css_rwd_mediaqueries. asp Чтобы для каждого размера экрана выдать свои классы.

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

Как сделать Google Chrome полноэкранным: Mac и ПК

  • Чтобы перейти в полноэкранный режим в Google Chrome, щелкните значок полноэкранного режима в его меню-гамбургере.
  • Вы также можете войти в полноэкранный режим, нажав «F11» на ПК или «Control + Command + F» на Mac.
    • Пользователи Mac
  • также могут нажать кнопку «расширить окно», чтобы войти или выйти из полноэкранного режима в Chrome.

Если вы хотите использовать Google Chrome, не отвлекаясь на другие элементы на экране, вы можете просто включить полноэкранный режим.

Способ активации полноэкранного режима в Chrome одинаков как на ПК, так и на Mac — самая большая разница заключается в сочетаниях клавиш.

Вот что вам нужно знать.

Что такое полноэкранный режим в Chrome?

Полноэкранный режим Google Chrome позволяет пользователям не отвлекаться во время работы в Интернете, скрывая все другие программы.

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

Как перейти в полноэкранный режим в Google Chrome на ПК или Mac

1. Откройте Google Chrome на ПК или Mac.

2. Нажмите на три вертикальные точки , также известные как гамбургер-меню, в правом верхнем углу окна Chrome.

Нажмите на меню гамбургера. Стефан Ионеску

3. Щелкните значок полноэкранного режима — кнопка в виде пустого квадрата — находится рядом с параметром «Масштаб».

Щелкните значок полноэкранного режима. Стефан Ионеску

Подсказка . Пользователи Mac также могут нажать на маленькую зеленую точку в верхнем левом углу окна Chrome. Эта кнопка доступна в большинстве приложений Mac, и ваши приложения будут занимать весь экран. Щелчок по той же точке также приведет к выходу из полноэкранного режима.

Пользователи Mac также могут использовать маленькую зеленую точку для входа и выхода из полноэкранного режима. Стефан Ионеску

4. Чтобы выйти из полноэкранного режима, поместите указатель мыши в верхнюю часть экрана.

5. Кнопка X появится в верхней центральной части экрана. Щелкните ее, чтобы выйти из полноэкранного режима.

Нажмите кнопку «X», чтобы выйти из полноэкранного режима в Chrome. Стефан Ионеску

Подсказка : Вы также можете нажать F11 для входа и выхода из полноэкранного режима Google Chrome на ПК. На Mac нажмите Control + Command + F , чтобы сделать то же самое.

Марисса Перино

Марисса Перино — бывший стажер редактора, освещающая образ жизни руководителей. Ранее она работала в Cold Lips в Лондоне и Creative Nonfiction в Питтсбурге. Она изучала журналистику и коммуникации в Университете Питтсбурга, а также писательское мастерство. Найдите ее в Твиттере: @mlperino.

ПодробнееПодробнее

Как сделать полноэкранный адаптивный сайт | Райан Каллум

Если вы только начинаете работать с CSS или даже являетесь опытным специалистом, вы, вероятно, поняли, что позиционировать элементы так, чтобы они попадали в нужное место, не всегда было легко. Возможно, у вас возникли проблемы с размером контента на веб-сайте. Как бы то ни было, создание полноэкранного веб-сайта состоит из использования соответствующих модулей и технологии под названием 9.0017 CSS Flexbox

В этом уроке мы сосредоточимся на Flexbox и vh unit для создания красивого минималистского веб-сайта. Пример нашего готового продукта ниже.

[codepen_embed height=”436” theme_id=”0” slug_hash=”wRPoXQ” default_tab=”html,result” user=”racullum”] См. полностраничные HTML-разделы Pen от Racullum (@racullum) на CodePen.[/ codepen_embed]

Итак, давайте разобьем наш сайт на три частей:

Шаг №1: Создайте скелет HTML.
Шаг №2: Скелет HTML стиля.
Шаг №3: Увеличьте разделы HTML на весь экран.

Во-первых, нам нужно выяснить, как будет выглядеть структура. Я решил, что каждый цвет должен быть в своем разделе. На самом деле вы можете поместить свою страницу «О нас» в один раздел, а страницу «Миссия» — в другой. Например, мы просто будем придерживаться наших 7 цветов радуги.

Для каждого цвета мы начнем с раздела, который включает в себя div и два класса заголовков, один для имени цвета, а другой для атрибутов цвета.
Вот так…





Красный


Возбуждение. Энергия. Страсть.





Создайте еще шесть секций для следующих шести цветов радуги. У вас должно получиться что-то похожее на это …

Теперь, когда у нас есть общая структура нашего HTML-документа, нам нужно придать ему немного стиля.

Сначала я дам вам таблицу стилей, а затем объясню, что я сделал.

Давайте рассмотрим этот элемент за элементом …

 body { 
 margin: 0; 
 заполнение: 0; 
 }  Установка полей и отступов на 0 гарантирует, что цвет фона для каждого раздела может занимать как можно больше места!  h2 { 
 размер шрифта: 10vw; 
 цвет: #ffffff; 
 набивка слева: 7vw; 
 нижняя граница: 0; 
 }  Просто добавьте немного отступа в левой части названия цвета и уберите поля внизу, чтобы у нас был четкий подзаголовок под названием цвета.   Размер шрифта является произведением ширины окна просмотра. Отличный способ сделать элементы заголовка отзывчивыми.  h4 { 
 верхняя граница: 0; 
 набивка слева: 7vw; 
 цвет: #ffffff; 
 }  То же, что и наш элемент h2, только немного переместите его и убедитесь, что текст рядом с нашим названием цвета приятный и удобный.

Итак, теперь мы подошли к сути нашего урока. В настоящее время у нас есть только элементы раздела, занимающие столько места, сколько необходимо для его содержимого, и все. Что нам нужно сделать, так это использовать CSS Flexbox. Flexbox позволит нам раскладывать разделы по порядку, как стопку книг. Используя параметр «display: flex» в нашей таблице стилей, мы можем заставить элементы в разделе следовать философии CSS Flexbox. Следуйте этому руководству, чтобы получить более полное представление о Flexbox. Добавление ‘display: flex’ вот так…

 section { 
 display: flex; 
 }

теперь удаляет все пробелы в документе. Мы еще не закончили! Нам нужно добавить еще один атрибут в таблицу стилей, чтобы наши цветные разделы занимали весь экран. Для этого мы будем использовать относительную единицу длины ‘vh’ . ‘vh’ обозначает высоту области просмотра и относится к 1% высоты области просмотра. Итак, если мы добавим ‘height: 101vh’ к элементу section в нашей таблице стилей, мы должны увидеть, что наши цветные секции занимают весь экран…

Полноэкранные веб-страницы — это круто и все такое, но давайте сделаем еще один шаг вперед и сделаем наш веб-сайт адаптивным!

Адаптивный дизайн всегда должен быть у вас на уме, особенно сейчас, когда мы живем в мире мобильных устройств. Наш веб-сайт может хорошо выглядеть на компьютере, но хорошо ли он выглядит на мобильном телефоне?

С помощью медиа-запросов мы можем гарантировать продуманный дизайн для всех типов устройств. Думайте о медиа-запросе как о точке останова, почти как о тесте на высоту для честных поездок. Если вы выше определенного роста, вы получаете один опыт, в то время как более низкие дети получают другой. Давайте добавим медиа-запрос, который говорит, имеет ли устройство ширину 9от 0017 до , скажем, 600 пикселей, переупорядочить элементы в более удобочитаемый вид…

 @media only screen and (max-width: 600px) 
 { 
 section { 
 align-items: center !important; 
 } 
 h2 { 
 padding-top: 0 !важно; 
 } 
 }

Как только вы добавите это в таблицу стилей, у вас будет готовый продукт…

Хорошо! Надеемся, что теперь у вас есть знания для реализации полноэкранных страниц на вашем собственном веб-сайте. Я надеюсь, что это руководство было полезным для вас, и вы получили что-то от него.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *