Css страница для любого разрешения: Как адаптировать сайт под разные мониторы / Skillbox Media

 
    <голова>
    
    
    
    
    
     <дел>
     <центр>
     <граница таблицы = "0"
     ячейка заполнение = "0" ячейки = "0">
     
        <тд colspan="20">
             
   
        <тд>
            
     
    
        <тд рядов = "10">
            
   
        <тд рядов = "4">
            
                 gif"
    граница = "0" alt = "">
        <тд colspan="18">
            
        <тд>
            
      
      
        
            
    
        <тд рядов = "2">
 
            
                
        
            
    
        <тд рядов = "2">
            
                
        <тд рядов = "9">
            
     
        <тд>
            
                
        
            
     
        <тд>
              gif" alt="">
    
    
        <тд рядов = "8">
            
   
        <тд>
            
    
    
        <тд рядов = "7">
            
    
        <тд рядов = "7">
            
     
        <тд>
            
    
    
        <тд рядов = "6">
            
      
        <тд>
             
     
     
        <тд рядов = "5">
            
      
        
            
                
        <тд colspan="5">
            
        
             html">
                 
        <тд рядов = "5">
            
     
        <тд>
            
    
    
        <тд рядов = "4">
            
       
        <тд colspan="3">
            
                
        <тд рядов = "4">
            
      
        <тд>
            
    
    
        <тд colspan="2">
            
        <тд colspan="3">
             
        <тд colspan="3">
            
      
        <тд>
            
     
     
        <тд>
             facebook.com/cocinaomarket">
                
        <тд рядов = "2">
            
        <тд рядов = "2">
            
        <тд>
            
                
 
        <тд рядов = "2">
            
        <тд рядов = "2">
            
        <тд>
            
                
        <тд рядов = "2">
            
        <тд>
            
       
       
        <тд>
            
        <тд>
              gif" alt="">
        <тд>
            
        <тд>
            
        
      
        
       

` в css без везения. Любые идеи? Вот скриншот, чтобы вы могли увидеть, о чем я говорю маржа: 0; ширина: 100vw; высота: 100вх; } дел { ширина: 100vw; высота: 100вх; }

vw означает viewport-width , что означает 100% того, что видит пользователь (по ширине). vh означает viewport-height , то же самое но по высоте

1

я думаю, это то, что вам нужно

 div {
  максимальная ширина: 768 пикселей;
  максимальная высота: 1024 пикселей;
  маржа: авто;
  дисплей: блок;
}
 

0

Можно попробовать так:

 html, body {width: 100vw; высота: 100вх;}
div {ширина: 100%; высота: 100%}
 

Думаю сработает

1

В качестве единиц ширины и высоты можно использовать vw и vh.

 корпус{
    маржа: 0;
}
дел {
    ширина: 100vw;
    высота: 100вх;
}
 

Подходит для любого устройства.

Редактировать:

Заметили, что вы пытаетесь создать веб-сайт с элементом таблицы. Обычно мы так не делаем.

width="1001" ограничивает ширину и высоту, поэтому приведенное выше решение vw , vh не работает.

Предлагаю вам построить сайт из div или других элементов. Не полагайтесь на фотошоп.

3

Ширина вашей основной таблицы (обертки) определяется в этой строке:

 
 Вы можете изменить ширину 1001 на любую, например 2000 или 100%. Однако этот тип кодирования (с использованием таблиц) не идеален, это старый и нестандартный подход к кодированию веб-страниц. Попробуйте использовать такой фреймворк, как bootstrap, и оптимизируйте свой код, это просто и обеспечивает адаптивные варианты для небольших устройств.
 2
 Зарегистрируйтесь или войдите в систему 
 Зарегистрируйтесь с помощью Google
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя электронную почту и пароль
 Опубликовать как гость 
 Электронная почта
 Требуется, но никогда не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 Понимание пикселей и других единиц CSS · WebPlatform Docs 
  Винсент Харди, Сильвен Галино 
 Резюме 
 В этом руководстве рассматривается взаимосвязь между пикселями CSS и другими единицами измерения, а также между пикселями CSS и устройствами.
 Введение 
 Растущее количество единиц измерения длины CSS предоставило веб-авторам новую гибкость (см. спецификацию CSS Values ​​and Units). Например, модуль «rem» (корневой «em») позволяет использовать размер шрифта корневого элемента для изменения размера всего документа.
 Они помогают разработчикам размещать контент независимо от размера и разрешения экрана.
 Независимость от дисплея: адаптация макета 
 Современный контент должен быть готов к различным средам просмотра: смартфоны, планшеты, большие мониторы или даже экраны телевизоров охватывают огромный диапазон размеров, соотношений сторон, плотности пикселей и расстояний просмотра. Доступен ряд инструментов, которые помогут разработчикам оптимизировать свой макет для наилучшего опыта, например. чтобы избежать или свести к минимуму неудобную прокрутку.
 Медиа-запросы и настройки окна просмотра 
 Большинство разработчиков теперь знакомы с использованием медиа-запросов. Они позволяют применять правила CSS в зависимости от мультимедийных факторов отображения, таких как размер или соотношение сторон. Их можно использовать для указания отдельных таблиц стилей для каждой целевой среды или для уточнения и адаптации основной таблицы стилей.
 Понимание и настройка окна просмотра дисплея особенно важны для мобильных клиентов, поскольку это позволяет вашему контенту соответствовать дисплею устройства пользователя.
 Процентные единицы 
 Проценты, доступные начиная с CSS1, позволяют изменять размер элементов относительно содержащего их блока. Например, мы можем настроить тело документа следующим образом:
 body {
       ширина: 80%;
       максимальная ширина: 900 пикселей;
       поле слева: авто;
       поле справа: авто;
}
 
 … чтобы размер тела не превышал 900 пикселей, а в противном случае — 80% ширины области просмотра. (Обратите внимание, что пиксели CSS не являются пикселями устройства; это будет подробно обсуждаться позже)
 Другие полезные относительные единицы 
 Некоторые другие типы единиц CSS поддерживают адаптацию макета. В следующей таблице перечислены некоторые из них:
 em
 1 em — вычисленное значение размера шрифта для элемента, для которого оно используется.
 Например, для элементов заголовка
 размер шрифта может быть установлен равным 3em, а размер основного текста должен быть равен 1em, благодаря чему при всех условиях отображения текст заголовка будет в 3 раза больше основного текста. Следует отметить, что при использовании в качестве значения свойства размера шрифта единица em относится к размеру шрифта родительского элемента. Таким образом, в нашем примере элемент 
 внутри
 с размером шрифта: 2 em будет иметь текст в 6 раз больше, чем в теле. 
 пр.
 1 ex — высота x текущего шрифта. Высота x обычно (но не всегда, например, если в шрифте нет «x») равна высоте строчной «x»
 Редко используется на практике. Может использоваться для изменения размера встроенных изображений в соответствии с высотой x текущего шрифта для визуальной гармонии.
 ч
 1 ch — это сдвиг глифа «0» (ноль) в текущем шрифте. «ch» означает символ.
 Может использоваться для оформления моноширинного текста или шрифта Брайля.
 рем
 1 rem — вычисленное значение свойства font-size для корневого элемента документа.
 Эту единицу часто проще использовать, чем единицу «em», потому что она не зависит от наследования, как единицы «em».
 Например, если размер шрифта корневого элемента равен 20 пикселей, установка размера шрифта 0,5 em для элементов
 приведет к разрешению 10 пикселей для
 первого уровня, но
 второго уровня будет иметь размер шрифта 5 пикселей. размер. Установка размера шрифта на 0,5rem приведет к созданию элементов
 размером 10 пикселей независимо от их уровня вложенности.
 фольксваген
 1vw составляет 1% ширины области просмотра. «vw» означает «ширину области просмотра».
 Полезно для изменения размера блоков, которые адаптируются к разной ширине области просмотра.
 вх
 1vh — это 1% высоты области просмотра. «vh» означает «высота области просмотра».
 Полезен для изменения размеров блоков, которые адаптируются к разной высоте видового экрана. Например, можно использовать для установки максимальной высоты изображения, чтобы оно не превышало размеры области просмотра.
 вмин
 Равен меньшему из значений «vw» или «vh»
 См. vh/vw
 вмакс
 Равен большему из значений «vw» или «vh»
 См. vh/vw
 Как насчет холста и вариантов использования «полного контроля пикселей»? 
 До сих пор мы сосредоточились на стилизации элементов документа с помощью CSS. Однако в некоторых случаях использования требуется полный контроль приложения над каждым нарисованным пикселем, например. в видеоигре.
 И контекст Canvas 2D, и масштабируемая векторная графика могут использоваться для удовлетворения таких требований, а также WebGL. Также можно использовать абсолютно позиционированный контент для повышения производительности в очень специфических обстоятельствах (например, в играх).
 Несмотря на то, что разработчикам не следует небрежно реализовывать собственный макет, в некоторых случаях это все же лучший вариант, чем переход к разработке собственных приложений.
 Рендеринг, не зависящий от разрешения 
 Но вернемся к основам: что такое независимость от разрешения и почему это важно?
 Независимость от разрешения определена 
 Когда содержимое выводится на носитель вывода, такой как принтер или экран, программное обеспечение преобразует описание того, что необходимо нарисовать, в фактические пиксели. Например, строка текста сначала преобразуется в набор геометрических контуров, определяемых данными шрифта; эти контуры затем «растрируются» или превращаются в пиксели. Тот же процесс происходит для более простых фигур, таких как прямоугольник, нарисованный в определенном месте (координата x/y) и с определенным размером (шириной и высотой).
 Как подход к рендерингу, независимость от разрешения требует, чтобы объекты описывались таким образом, который не зависит от точных характеристик среды вывода. Цель состоит в том, чтобы иметь возможность указать, что нужно нарисовать, и позволить базовому программному обеспечению определить, как это сделать для конкретного устройства вывода во время выполнения.
 Это особенно важно, когда размер и плотность пикселей устройств вывода различаются так же широко, как и на современных устройствах просмотра. Например, на экране с разрешением 96 точек на дюйм (точка на дюйм = пиксель устройства на дюйм) миллиметр будет иметь длину около 4 пикселей устройства, поэтому прямоугольник, расположенный в точке (x = 10 мм, y = 20 мм), будет располагаться в точке x = 40 пикселей устройства и y=80 пикселей устройства. В то время как на дисплее с разрешением 300 точек на дюйм миллиметр будет иметь длину около 12 пикселей устройства, а прямоугольник должен быть расположен на координатах x = 120 пикселей устройства и y = 240 пикселей устройства. Однако, и это важная часть, прямоугольник будет отображаться в том же физическом положении на дисплее по модулю округления, то есть примерно на 10 мм по оси X и на 20 мм по оси Y.
 Масштабируемое содержимое 
 Чтобы не зависеть от разрешения, система должна иметь возможность масштабировать содержимое в зависимости от условий рендеринга. Postscript и PDF являются примерами технологий, основанных на концепции единиц измерения, которые затем можно масштабировать по мере необходимости для соответствия доступному разрешению экрана. Оба используют единицу измерения «точка» и определяют ее как 1/72 дюйма.
 Масштабируемая векторная графика (SVG) делает то же самое и имеет концепцию пользовательской единицы, из которой в конечном итоге выводятся все остальные единицы; CSS определяет пиксели CSS, единицу, к которой все остальные разрешают (пользовательская единица SVG такая же, как CSS «px»).
 Во всех этих случаях положения и размеры объектов в конечном итоге сводятся к одной единице, которую затем можно сопоставить с несколькими пикселями устройства и масштабировать по желанию, например. когда пользователь масштабирует содержимое.
 Прежде чем мы углубимся в единицу CSS «px», отметим, что масштабируемые форматы, такие как SVG, являются очень эффективным способом достижения независимости от разрешения или отклика для ваших графических ресурсов.
  Примечание.  Иконочные шрифты — еще одна недавняя популярная практика с 2013 года, например. см. http://css-tricks.com/html-for-icon-font-usage/ или http://nimbupani.com/markup-free-icon-fonts-with-unicode-range.html. А еще есть очень умные хаки OpenType, такие как Chartwell или Symbolset. Сегодня они являются частью масштабируемого арсенала.
 О пикселях CSS, физических единицах измерения и масштабируемости 
 Хотя спецификация CSS Values ​​and Units определяет все единицы CSS в одном документе, может потребоваться некоторая работа, чтобы понять, как CSS связывает свои единицы измерения с реальными мерами. , или физические единицы. Все, что указано в спецификации, может быть сформулировано следующим образом:
  96px = 1 дюйм 
 Простая математика определяет два возможных поведения, допускаемых спецификацией:
 На устройстве с высоким разрешением — лазерные принтеры сегодня, экраны в будущем — CSS рендеринг должен сопоставлять дюйм с его физическим размером (это то, что спецификация называет «связыванием физических единиц с их физическими измерениями»). В результате единица CSS «px» (поскольку это 1/96 дюймов) может разрешаться в дробное число пикселей устройства. Например, на экране с разрешением 300 точек на дюйм (пикселей устройства на дюйм) отношение пикселей устройства к пикселям CSS составляет 300/96 = 3,125. Как следствие, если вы стилизовали элемент с помощью:
 граница: 1 пиксель сплошной синий;
 
 … его граница должна быть шириной 3,125 пикселя устройства. В зависимости от растеризатора — части программного обеспечения, которая преобразует основные формы в пиксели — вы можете получить синий, полностью покрывающий 3 пикселя, а затем частично покрывающий 4-й пиксель, используя сглаживание для смешивания с фоном.
 Для устройств с низким разрешением спецификация рекомендует «соотносить единицу пикселя с эталонным пикселем и далее советует, чтобы «единица пикселя относилась к целому количеству пикселей устройства, которое наилучшим образом соответствует эталонному пикселю». В нашем предыдущем примере синяя рамка могла быть полным пикселем устройства.
 Еще несколько лет назад пиксель CSS обычно сопоставлялся с одним пикселем экрана. Как следствие, дюйм CSS не всегда соответствовал реальному физическому дюйму; если бы истинное разрешение ноутбука было 120 точек на дюйм, 9Дюйм длиной 6 пикселей в конечном итоге будет равен 96/120 = 0,8 физического дюйма!
 С появлением экранов с более высокой плотностью мы видим устройства с 2 пикселями устройства на пиксель CSS (например, Apple Retina), а также дисплеи с дробным соотношением пикселей (см. эту статью MDN). Обратите внимание, что дробное соотношение пикселей может привести к дополнительному сглаживанию при рендеринге, как и при рендеринге с высоким разрешением.
 Простой пример 
 

    <голова>
        <мета-кодировка="utf-8">
        
        
        <мета-имя="описание" содержание="">
       <мета имя="окно просмотра"
              контент = "ширина = ширина устройства, начальный масштаб = 1, максимальный масштаб = 1">
    
    <стиль>
    тело {
        фон: #404040;
    }
    .css-box > диапазон {
    отображение: встроенный блок;
       высота: 1см;
    граница справа: 1 пиксель сплошной черный;
    }
    .css-box.px > диапазон {
       ширина: 96 пикселей;
        фон: #fefefe;
    }
    .css-box.in > диапазон {
       ширина: 1 дюйм;
        фон: #4166B5;
    }
    
    <тело>
        

        

    

 
  Рис. 1. Рендеринг в OSX Safari 
 При попытке рендеринга этого документа на разных устройствах мы видим, что:
 Во всех случаях светлое и синее поле имеют одинаковый размер. Это связано с тем, что 1 дюйм CSS всегда равен 96 пикселям CSS; белые поля имеют ширину 96 пикселей, а синие поля имеют ширину 1 дюйм. Как и ожидалось, их ширина совпадает.
 На 15-дюймовом дисплее MacBook Pro с разрешением 110 точек на дюйм физическая ширина коробки составляет: 96 * 1/110 = 0,872 дюйма. Это связано с тем, что соотношение CSSpx/пиксель устройства равно 1. Используя линейку на моем экране, я измерил 0,88 дюйма, и разница заключается в моей элементарной линейке и приблизительном видении :-). Таким образом, дюйм CSS отличается от физического дюйма на 22,8%.
 На iPhone 5 с разрешением 326 точек на дюйм физическая ширина коробки составляет 96 * 2 / 326 = 0,589 дюйма. Это связано с тем, что на этой платформе отношение пикселей CSS к устройству равно 2. Опять же, используя линейку, я получил 1,592 дюйма. Опять ошибка измерения. Здесь дюйм CSS отличается на 41,1%
 На принтере (я использовал Canon Pixma MP600) физический дюйм коробки равен … 1,05 дюйма!! Так что это ошибка 5% на этом конкретном принтере.
 Итак… пиксель не пиксель, а дюйм не дюйм? 
 Ну, это почти так, но это не так плохо, как кажется. Вот почему:
  Пиксель CSS является «эталонным», а не пикселем устройства  . Это вводит в заблуждение, и лично я предпочитаю понятие «пользовательская единица», которое использует SVG, потому что я думаю, что тогда проще объяснить сопоставление с физическими единицами и пикселями устройства. Но как только вы понимаете, что «px» на самом деле является ссылкой, а не пикселем устройства, все становится более понятным. Следует помнить, что CSS px — это абстрактная единица измерения, и существует соотношение, управляющее тем, как оно а) сопоставляется с реальными пикселями устройства и б) сопоставляется с физическими единицами (фиксированным образом, соотношение всегда равно 9).6 CSS пикселей на дюйм).
  Дюйм CSS точно или «близок» к дюйму  . На устройствах с высоким разрешением, и если никакие другие параметры не мешают (например, пользовательское масштабирование или преобразование CSS), дюйм будет физическим дюймом, как и ожидалось. На устройствах с низким разрешением будет погрешность, как описано выше.
  Масштабируемость и адаптируемость важнее всего  . Наиболее важным аспектом для большинства разработчиков является то, что макет содержимого может изменяться и адаптироваться по мере масштабирования блоков предсказуемым и разумным образом. Хотя концепция сохранения точного соотношения сторон на всех устройствах может показаться привлекательной, она имеет последствия, нежелательные для устройств с низким разрешением (например, нежелательное сглаживание, вызывающее размытие рендеринга).
 Заключительные мысли 
 Итак, о чем должны помнить веб-разработчики, чтобы наш контент хорошо отображался на дисплеях различных размеров, форм-факторов и плотности пикселей? Вот несколько выводов:
 Используйте медиа-запросы, чтобы использовать желаемый макет в зависимости от условий рендеринга (например, маленький экран устройства, тип планшета, рабочий стол, большой дисплей).