2017-01-31 2 views
1

У меня есть iframe внутри обертки. Оболочка имеет ширину = 350px и height = 450px. IFrame принимает высоту и ширину этой обертки.Как применять классы самонастройки в iframe на основе размера окна, а не размера iframe

Моя проблема в том, что я использую класс утилиты bootstrap, например. hidden-xs, они применяются даже на рабочем столе. Есть ли способ, которым эти стили реагирования будут фактически применяться на основе размера окна, а не размера iframe. CSS загружается внутри iframe.

Я пробовал подход согласно iFrame and media query issue, но он не работал для меня.

+2

Запросы мультимедиа основаны на окне просмотра, а для содержимого внутри iframe - iframe _is_ в окне просмотра. То, что вы хотите, в настоящее время невозможно. _Измеренные запросы СМИ были предложены несколькими людьми, но пока не реализовано. – CBroe

+0

Спасибо. Это объясняет, я рассмотрю другие подходы. Наличие моего собственного класса CSS и определение стилей с шириной устройства (max-device-width) вместо ширины будет работать, но похоже ли это как хороший подход? – CodingBee

ответ

0

Во-первых,

так плавающем фрейме просто окно, которое отображает внешние HTML-файлы, то это означает, что сам IFrame представляет собой экран окно/браузер. Таким образом, вы должны сначала сделать его отзывчивым:

https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

После этого вы должны применить классы начальной загрузки или что-то к внешнему HTML файла, который отображается в окне IFRAME. Иными словами, создать другой файл html, ссылку bootstrap, дизайн html так, как вы хотите, а затем отобразить его на iframe.

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

http://urbanphenomena.net/shukri/#page3

И если вы не хотите какие-либо изменений в IFRAME ... попробуйте добавить IFRAME за пределами сНа, класс или любой другой, так CSS в классе не влияет на IFRAME

+0

iframe действительно является окном просмотра внешнего HTML-файла, но я не уверен, что этот вопрос был полностью понят вами. Содержимое iframe является отзывчивым, просто не так, как я хочу. Спасибо за ваши материалы, на этот вопрос ответ отвечает. – CodingBee

Смежные вопросы