как исправить макет моего сайта на маленьких и больших экранах

0

Привет, ребята, я сделал сайт с помощью Dreamweaver в HTML, CSS и JavaScript, теперь мой экран составляет 15,4 дюйма, когда я открываю их на маленьких экранах, чтобы он дал мне полосу прокрутки, чтобы увидеть весь мой сайт в форме ширины.

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

.wrapper
{
  width:1320px;
  height:760px;
  border:solid 1px #000;
  margin:0 auto;
  background:url(images/Background_Image.jpg) no-repeat;    
}
.wrapper .logo
{
    background:url(images/logo.png) no-repeat;
    width:395px;
    height:180px;
    margin-left:323px;
    margin-top:10px;
    float:left;
    // same method for other divs
}
  • 0
    Вы используете фиксированную ширину, вы можете вместо этого прибегнуть к использованию процентов. Или добавьте несколько медиазапросов для меньших экранов.
  • 0
    извините, как обращаться с экранами меньшего размера
Показать ещё 1 комментарий
Теги:

1 ответ

1

Добавьте этот метатег в голову

viewport - самый важный и полезный из всех метатег. ширина контролирует ширину окна просмотра, начальная шкала загружает начальный уровень масштабирования при загрузке страницы

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

Проверка документов Mozilla - Viewport

использовать медиа-запросы

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

Документы Mozilla - запросы в СМИ

Процент /em хорош, если вы хотите, чтобы ваш сайт был отзывчивым

Поделиться
  • 0
    Раунак Каттурия: спасибо за ваш ответ, я новичок в HTML и CSS. Скажите, пожалуйста, где использовать это: экран @media и (min-width: 700px) и (ориентация: ландшафт) {...}
  • 0
    Добавьте все медиа-запросы в ваш файл CSS, основной CSS, который вы будете использовать, и если вы используете inline, добавьте его в <style> </ style> в разделе <head>
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню