Был у меня вопрос по форматированию картинки под разные разрешения. На всякий случай, начало обсуждения тут:
ТЫК!
Проблема решилась через чистый CSS.
Но небольшой ooops имеется.
Сайт
http://alex-potemkin.squarespace.com - пока на триале, надо нажать кнопу и ввести предложенный код, простите за неудобства. Конструктор SquareSpace не дает доступа к исходному коду, но позволяет внедрять кастомный CSS и скрипты.
На сайте две раскладки: десктопная и мобильная.
Десктопная раскладка обрабатывается как часы.
А мобильная, при вроде бы такой же структуре CSS, не обрабатывается
при загрузке. При перерасчете размера окна - все работает. Например, на планшете - загрузил в ландшафте (благодаря размеру, грузится корректно работающая десктопная раскладка, не мобильная), перевернул в портрет - раскладка меняется на мобильную и всё рассчитывается как прописано; или на десктопе при масштабировании окна - при сужении до заданных размеров происходит смена раскладки на мобильную с корректным перерасчетом блоков. Если на десктопе перегрузить узкое окно "телефонных" размеров, то загрузится мобильная раскладка без перерасчета. Но если после этого изменить размеры окна до десктопного, а потом вернут к телефонному - то всё перерассчитается. Но на том же планшете при загрузке в портрете - загружается мобильная раскладка, но разметка блоков игнорируется. Если при этом перевернуть в ландшафт - перерассчитает на обычную раскладку, потом вернуть в портрет - вернет мобильную, но уже с корректным расчетом блоков. На телефоне еще хуже: поскольку, из-за размеров экрана, грузится только мобильная раскладка - корректного рассчета блоков не происходит никогда, как его ни крути.
Чего ему не хватает?
Масштабироваться дожна КАРТИНКА, описываемая в коде как
div.slide[data-slide-url="gallery-description"] img {...} (так много обвеса - чтобы победить приоритет оригинального кода), на десктопе проще - собственно минимально-достаточный уникальный идентификатор элемента
div[data-slide-url="gallery-description"] img {...}
Вот два фрагмента кода, для десктопа и мобилы (блоков под разные размеры там много, но они типовые):
десктоп:
@media only screen and (max-height:1200px){.collection-type-gallery #slideshow{height:800px}.collection-type-gallery #slideshow .slide,.collection-type-gallery #slideshow .slide img{height: 800px;}#headerWrapper nav, #headerWrapper nav a, #mobileNav nav a, #mobileNav nav label {font-size: 14pt;}.site-title .logo {font-size: 40pt;}.logo-subtitle {font-size: 10pt;} #header, {padding-top: 10pt; padding-right: 60px; padding-bottom: 10pt; padding-left: 90px; }
/*галерея-описание */
.collection-type-gallery #slideshow .slide div.image-description {background: white; opacity: 100; margin-left: 65px; padding-top: 0px; /* border-top: 1px solid black;*/ top: 0px;}
.collection-type-gallery #slideshow .slide div.image-description strong {font-size: 40pt; color: #bbbbbb; font-weight: normal; opacity: 100; }
.collection-type-gallery #slideshow .slide div.image-description p {font-size: 16pt; color: black; opacity: 100; padding-top:10px; padding-bottom: 0px; margin-bottom: 0px;}
#header, #footer {padding-top: 10pt; padding-right: 60px; padding-bottom: 5pt; padding-left: 85px; }
.sqs-footer-injection {padding-left: 85px;}
div[data-slide-url="gallery-description"] img {width: 500px;}
}
мобила:
@media only screen and (max-width:800px){#slideshowWrapper.mobile-gallery #slideshow .slide .image-description {position: absolute; margin-top: 10px;}
#slideshowWrapper.mobile-gallery div#slideshow.sqs-gallery-design-strip div.sqs-wrapper div.slide[data-slide-url="gallery-description"] img {height: 300px !important;}
/*галерея-описание */
.collection-type-gallery #slideshow .slide div.image-description {background: white; opacity: 100; margin-left: 35px; padding-right: 30px; padding-top: 0px; /* border-top: 1px solid black;*/ top: 0px;}
.collection-type-gallery #slideshow .slide div.image-description strong {font-size: 28pt; color: #bbbbbb; font-weight: normal; opacity: 100; }
.collection-type-gallery #slideshow .slide div.image-description p {font-size: 13pt; color: black; opacity: 100; padding-top:10px; padding-bottom: 0px; margin-bottom: 0px;}
#header, #footer {padding-top: 10pt; padding-right: 40px; padding-bottom: 5pt; padding-left: 85px; }
.sqs-footer-injection {padding-left: 63px;}
}
что упущено?
