Можно ли сделать так, чтобы высота DIV соответствовала ширине DIV с помощью Compass или Susy?
Я создаю полностью изменчивый сайт портфолио дизайна, на котором есть страница галереи миниатюр дизайна, показывающая сетку ссылок миниатюр плиток, по которым зритель может щелкнуть, чтобы увидеть полную иллюстрацию. Поскольку сайт полностью изменчив, ширина плитки соответствует высоте плитки только 3 раза, так как один из них переключается между 3 отзывчивыми состояниями, поскольку высоты зафиксированы на месте.
Как сделать так, чтобы высота соответствовала ширине каждой плитки миниатюр?
Вот код:
@import compass
@import susy
@import normalize
$total-columns : 4
$column-width : 60px
$gutter-width : 20px
$grid-padding : $gutter-width
$container-style: fluid
$tablet : 9
$desktop : 14
// Susy-grid-background override to draw out horizontal lines
=susy-grid-background
+grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true)
$base-font-size: 18px
$base-line-height: 30px
+establish-baseline
ul
background-color: rgb(111, 50%, 250)
li
background: rgba(200,50,0,.2)
text-align: right
img
width: 100%
h1
+adjust-font-size-to(90px)
+adjust-leading-to(4, 90px)
+leader(2, 90px)
background: rgb(0,20,200)
h1#logo
+adjust-font-size-to(30px)
+adjust-leading-to(2, 30px)
+leader(0, 30px)
h2
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
p
+leader(1)
+trailer(1)
.page, header, .pagenav, .main, .pagefoot
+transition(all .3s ease)
/* 5 Column Layout */
.page
+container($total-columns, $tablet, $desktop)
+susy-grid-background
/* ------------------- BREAKPOINTS ---------------------------- */
/* ------------------- MOBILE (default) ------------------------*/
p
+leader(0)
header
+container
position: fixed
left: 0
right: 0
bottom: 0
height: 2.3em
background: rgba(250,250,250,.7)
h1#logo a
+hide-text
float: right
+span-columns(1)
background: red
.navicon
+span-columns(1)
background: green
.pagenav
+span-columns(4)
background: rgba(150,200,250,.3)
ul
background: #ffccff
li
text-align: left
.main
+span-columns(4)
margin-top: 1em
background: rgba(1,240,200,.3)
.tile
+isolate-grid(2, 4)
height: 206px
height: 233px
margin-bottom: 1em
background: cyan
.tile_title
+adjust-font-size-to(15px)
+adjust-leading-to(1, 15px)
background: #af6
.tile_use
@extend .tile_title
+adjust-font-size-to(10px)
+adjust-leading-to(1, 10px)
/* ------------------- TABLET ----------------------------------*/
+at-breakpoint($tablet)
.page
+container
+susy-grid-background
p
+leader(0)
header
+container
position: fixed
left: 0
right: 0
bottom: 0
height: 2.3em
background: rgba(250,250,250,.7)
h1#logo a
+hide-text
float: right
+span-columns(2)
background: red
.navicon
+span-columns(1 omega)
background: green
.pagenav
+span-columns(2 omega,9)
background: rgba(150,200,250,.3)
ul
background: #ffccff
li
text-align: left
.main
+span-columns(9)
margin-top: 1em
img
+span-columns(7, 9)
.tile
+isolate-grid(3, 9)
height: 304px
margin-bottom: 1em
background: cyan
.tile_title
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
background: #af6
margin: 10px
padding: 5px
.tile_use
@extend .tile_title
+adjust-font-size-to(20px)
+adjust-leading-to(1, 20px)
/* -------------------DESKTOP ----------------------------------*/
+at-breakpoint($desktop)
.page
+container
+susy-grid-background
header
+container
position: fixed
left: 0
right: 0
top: 0
height: 0
z-index: 3
h1#logo a
+hide-text
float: right
+span-columns(2)
background: red
.pagenav
clear: both
float: right
+span-columns(2)
background: rgba(150,200,250,.3)
.main
+span-columns(12 omega)
+leader(2)
z-index: 1
position: relative
background: rgba(1,240,200,.3)
img
+span-columns(10, 14)
.tile
+isolate-grid(4, 12)
height: 304px
margin-bottom: 1em
.tile_title
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
background: #af6
margin: 10px
padding: 5px
.tile_use
@extend .tile_title
+adjust-font-size-to(20px)
+adjust-leading-to(1, 20px)
Вот скриншоты сайта различной ширины:
4-х колоночный отзывчивый мобильный штат
Плитка выглядит как квадраты: ХОРОШО
320px X 480px: Плитка сдавливается: ПЛОХО
Плитка растягивается: ПЛОХО
9 Столбец Отзывчивый Состояние Таблетки
Плитка выглядит как квадраты: ХОРОШО
Плитка сжимается: ПЛОХО
14 столбец отзывчивого состояния рабочего стола
Плитка выглядит как квадраты: ХОРОШО
Плитка растягивается: ПЛОХО
ОБНОВИТЬ
Так как я реализовал использование Эрика Мейера fluid-ratio mixin с https://github.com/ericam/accoutrement/blob/master/stylesheets/accoutrement/_media.scss Мне удалось успешно получить все мои миниатюры плиток, чтобы иметь одинаковую высоту и ширину независимо от ширины окна браузера. Проблема в том, что h3.tile_title а также h4.tile_use элементы перекрывают друг друга в каждом a.tile, fluid-ratio миксин делает все мои a.tile иметь position: relative и все это дети, h3.tile_title а также h4.tile_use, иметь position: absolute, Вот скриншот того, что происходит:
Так как некоторые из моих h3 заголовки переносятся в 2 строки aЯ хотел бы иметь возможность позиционировать h4 Итак h4 всегда чуть ниже h3, Как это было бы возможно?
2 ответа
У CSS Tricks есть большое изложение методов жидких сред. Я большой поклонник опции Intrinsic Ratios и использую набор миксинов, чтобы сделать его очень простым. Я основал это на коде из инструментария, который сейчас работает немного по-другому. Используйте это как-то так:
.tile
+isolate-grid(4, 12)
// ratio of 16/9, with a width equal to 4 of 12 columns
+fluid-ratio(16/9, columns(4,12))
Если у вас есть дополнительная разметка, вы можете использовать ее для соотношения и пропустить columns() функция:
.tile
+isolate-grid(4, 12)
.inside
// ratio of 16/9, auto (100%) width
+fluid-ratio(16/9)
Надеюсь, это поможет.
- Рассчитать оптимальный размер шрифта на основе ширины (и высоты) дисплея
- Дайте плиткам ширину в
emи такой же высоты.10emкажется хорошей ценностью.
Смотрите jsfiddle. Или, лучше в демонстрационных целях, только панель вывода той же скрипки.