Как стилизовать поля в зависимости от размера экрана?

Мой веб-сайт изначально был разработан для настольного монитора с диагональю 20 дюймов (соотношение сторон 4:3). Однако в 2016 году я считаю (поправьте меня, если я ошибаюсь), что типичным является гораздо более широкий экран, например, 21 дюйм (16 соотношение сторон :9) встречается чаще.

В результате на нескольких «шаблонных» страницах сайта необходимо скорректировать таблицу стилей. Например, посмотрите на страницу категории на широком мониторе:
https://www.vintagetextile.com/1920s_to_1930s.htm

Как обновить таблицу стилей, чтобы стили не менялись для монитора с диагональю 20 дюймов (4:3). Однако на широкоэкранном мониторе, несмотря на то, что столбцы 1 и 2 останутся фиксированными, столбец 3 будет сужен за счет увеличения правое и левое горизонтальные поля страницы?

Заранее благодарю экспертов CSS из Digitalpoint, которые помогали мне в прошлом.

Вот текущая таблица стилей:

body {цвет фона: #fff; шрифт: средний Verdana, Tahoma, Helvetica, без засечек;}

*, *efore, *:after { -webkit-box-sizingorder-box; -moz-box-sizingorder-box; размер коробкиorder-box;}

.outer {ширина:90%;

маржа: 0 авто;}

h1 {цвет:#fff;

цвет фона: #535353;

шрифт: 1,55em «Bookman Old Style»;

отступ: 0,2em 22px 0,35em;

маржа-дно: 0,5em;}

h2 {цвет:#000;

цвет фона: #fff;

шрифт: жирный 1.125em Verdana, Tahoma, Helvetica, без засечек;

отступ: 0 16 пикселей;}

.logo { text-align:center;

поле-дно: 20 пикселей; }

.logo img { максимальная ширина: 100%;

высота: авто;

граница: 0 нет;}

.item {переполнение: скрыто;}

.item > div {

дисплей: таблица-ячейка;

вертикальное выравнивание: по середине;

дополнение: 0;}

.item .imagebox {padding-right:20px;}

.item:nth-child(odd) .descript {padding-left:209px;}

.item изображение

{display: встроенный блок;

ширина: 209 пикселей;

высота: 325 пикселей;

вертикальное выравнивание: сверху;

выравнивание текста: по центру;

граница: 0 нет;}

.item:nth-child(even) {margin-left:209px;}

.item:nth-child(odd) {background-color:#e5e5e5;}

.item p {размер шрифта:1em;

высота строки: 1,375;

поле:.5em 20px .75em 0; }

.pid {margin-top:.75em;}

.pid b { display:inline-block;

вертикальное выравнивание: сверху;

вес шрифта: жирный;

поле: .25em 24 пикселя; }

.pid b:first-child {

поле слева: 0; }

.pid .remark {цвет:#f00;}

Только экран Скрытая информация :: Авторизуйтесь для просмотра »
и (максимальная ширина: 900 пикселей)

{ .item:nth-child(even) {margin-left:0px;}

.item:nth-child(нечетный) .descript {padding-left:0;}

.item + .item {margin-top:6px;}

.item p {размер шрифта:.9375em;}}

Только экран Скрытая информация :: Авторизуйтесь для просмотра »
и (максимальная ширина: 700 пикселей)

{.item .imagebox {float:left;}

.item .descript {дисплей:блок;}

.item p {размер шрифта:.9375em; поле слева: 20 пикселей;}

h1 {выравнивание текста: центр;}}

Только экран Скрытая информация :: Авторизуйтесь для просмотра »
и (максимальная ширина: 520 пикселей)

{.outer {ширина:авто;}

.item .imagebox {

дисплей: блок;

плавающий: нет;

выравнивание текста: по центру;

отступ вправо: 0; }

.pid { text-align:center;

поле слева:-12 пикселей;

поле справа:-12 пикселей; }

.item p {маржа:.25em 12px .75em;}

.pid b:first-child {margin-left:24px;}}

Это называется ключевые слова... не ключевые предложения, не ключевые фразы, а ключевые слова.СЛОВА. Это должно быть семь или восемь отдельных слов (или имен собственных), которые существуют между и как CDATA.

(также известный как текст), желательно длиной менее 96 символов, который вы хотели бы НЕМНОГО повысить в рейтинге.

Вот именно, вот для чего это.

Вот почему ЭТО:

content="Флапер 1920-х годов, платья 1920-х годов, одежда «Титаник», чайное платье, ночная рубашка, платья 1920-х годов, Chanel, Vionnet, бархат с вышивкой, Fortuny, Boue Soeurs, Callot Soeurs, Paquin, Пуаре, Пату, Пуаре, Лелонг, Ланвен, Галленга».

Перегружен.

Это более 8 слов, между запятыми есть несколько слов, которые НЕ являются именами собственными (единственное исключение из правила одного слова), и его длина составляет 196 байт.

ХУЖЕ, Титаник, ночная рубашка, шанель, vionnet, boue soeurs , калло суэрс и лелонг даже не появляются на странице.

Вы превышаете определенную длину символов, используете более 7 запятых/8 терминов, включаете слова, которых нет на странице, помещаете между запятыми несколько слов, которые не являются именами собственными, это либо будет проигнорировано, либо приведет к в поисках шлепает вас за оскорбления.

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

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

Re: ключевые слова Помните, что это слова, которые, как вы ожидаете, будут использовать искатель.

Это должны быть слова, которые действительно есть в вашем тексте.

Например, много лет назад я написал статью о заключении элементов с плавающей запятой.

Насколько я помню, он занял хорошее место, №5. Когда я начал изучать журналы, я обнаружил, что рефералы Google чаще использовали ключевое слово «содержащий», чем «включающий». Это ключевые слова.

Я изменил элемент h1 статьи на «Содержит элементы с плавающей запятой» и переместился на номер 1 на странице результатов.

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

Хорошая идея — отсортировать текст, чтобы определить, какие слова вы на самом деле используете.

Сделать это очень просто: откройте URL-адрес в текстовом браузере вашего редактора.

Сохраните страницу (не исходный код) как текстовый файл.

В вашем CLI (я использую Xterm и BASH.

Если вы используете устаревшую ОС, DOS должен иметь эквивалентные функции) выполните следующую команду

 cat <keyword filename> | xargs -n1 | sort | uniq -ic > keyword-count

Код (разметка): это даст вам список (в файле «количество ключевых слов») уникальных слов и количество раз, которое каждое из них появляется на вашей странице. Гэри

Пеон: Спасибо большое за хороший совет.

Я просмотрел свою веб-статистику, которая показывает пользовательский агент (O/S), а не размер экрана, но из пользовательского агента можно получить некоторую информацию.

Я надеялся сделать ограниченную настройку своих стилей CSS для обеспечения более высоких соотношений сторон.

Как вы можете видеть из таблицы стилей, я уже использую «@media» и «max-width» для планшетов и телефонов.

Я надеялся, но не знал, что может существовать стиль CSS, который позволит обнаруживать и стилизовать по соотношению сторон, так что, если оно будет больше 1,6, только тогда вступит в силу новое правило (влияющее на поля).

Правда в том, что в 2016 году не существует типичного разрешения экрана или соотношения сторон.

Люди просматривают Интернет, используя самые разные экраны: от крошечных 2-дюймовых умных часов (иногда с круглым экраном) до больших 30-дюймовых мониторов (часто с дисплеями с высоким разрешением). Вы сильно ограничите себя, если решите поддерживать лишь небольшую часть из них.

Однако, если вы решите настроить свой сайт только для определенного типа экрана, вам, вероятно, следует просмотреть данные вашего веб-сайта и посмотреть, что используют ваши посетители, поскольку они могут сильно отличаться от того, что показывает общая статистика.

Тень Смерти и Аматор, Спасибо за предложение «максимальной ширины», которое сработало хорошо. Очень признателен. Необходимо принять во внимание резкие комментарии Deathshadow к моим HTML и CSS. Еще одно небольшое исправление на этой странице: https://www.vintagetextile.com/treasure_hunt.htm

Я хочу увеличить поля для текста вверху: Этот раздел винтажного текстиля предназначен для клиентов, которые ищут особую “находку” это не вписывается ни в одну из моих основных категорий.

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

Хорошей охоты! Все предметы в «Охоте за сокровищами» продаются «как есть». и все продажи являются окончательными!

body {ширина: 94%; поле: 0% 3% 0 3%; отступ: 0; граница: 0; цвет: # 000; цвет фона: # fff; шрифт: средний "Times New Roman", Times, serif; }

#tbl{ширина:726px;border:0;table-layout:fixed;position:relative;margin-left:auto;margin-right:auto;}

#tbl #col1,#tbl #col2,#tbl #col3{width:202px;}

.rt{padding-right:40px}

.bot td{padding-bottom:1.5em;}

.bi{font-weightold;стиль шрифта:курсив;} .lg{размер шрифта:большой;выравнивание текста:центр;} .lg1{размер шрифта:большой;выравнивание текста:центр;} Я попытался задать поля или отступы .lg1, но это не сработало.