Rendring banner image с текстом для разного разрешения мобильного экрана

Привет, я работаю на веб-странице, я нахожу затруднение в разработке баннера с текстом для разных мобильных ширины. Поэтому в мобильном я хочу показать только заголовок вертикально центра во всех мобильных ширинах, оставшийся абзац, содержимое и кнопка должны опуститься. Поскольку мобильные телефоны будут иметь разную ширину, в зависимости от того, что выравнивания идут плохо. Может ли какой-нибудь орган просто помочь мне, что такое простой способ отображения этой страницы на мобильных устройствах только с заголовком в верхнем, вертикально выровненном среднем и оставшемся абзаце и кнопке. Я использую поля, поэтому plz помогают мне найти лучший способ, кроме поля.Rendring banner image с текстом для разного разрешения мобильного экрана

jsbin ссылка: http://jsbin.com/butore/1/edit?html,css,output

источник

2015-04-15 Chandrika Desai

Вы можете использовать [медиа-запросы] (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/ Media_queries) для тонкой настройки стиля для определенных диапазонов размеров, в вашем случае только для мобильных устройств. Это лучший способ сделать это на мой взгляд – Zoran

Хорошо, если я понимаю, что вы хотите правильно, я предложил бы использовать медиа запросов - вам не нужно разрабатывать для каждой отдельной мобильной ширины; это было бы ужасно. Но найдите точки прерывания, когда ваше содержимое выведено из потока, и примените медиа-запрос, чтобы уменьшить маржу на этом элементе и т. Д.

В качестве альтернативы вы можете добавить desktop-only и mobile-only, которые будут меняться в зависимости от выбранной вами ширины устройства , Поэтому в вашем сценарии ваш класс mobile-only будет содержать ваш пункт и кнопку под баннером.

Например:

.desktop-only { 
     display:block; 
} 
.mobile-only { 
     display:none; 
} 
@media screen and (max-width: 45em) { 
     .desktop-only { 
       display:none; 
     } 
     .mobile-only { 
       display:block; 
     } 
}

источник

2015-04-15 19:11:27 jakehallas

Если вы беспокоитесь только с мобильными устройствами вы можете проверить агент пользователя и назначить класс к элементу тела на основе этого. Вот что я сделал в прошлом:

В контроллере приложения:

def is_phone? 
    ua = request.user_agent.try(:downcase) 
    if ua =~ /android/ && ua =~ /phone/ 
    true 
    elsif ua =~ /iphone|ipod/ && ua !=~ /ipad/ 
    true 
    elsif ua =~ /blackberry/ && ua !=~ /tablet/ 
    true 
    elsif ua =~ /windows phone/ 
    true 
    else 
    false 
    end 
end 
helper_method :is_phone?

Тогда в макете на вашем элементе:

<body class="<%= 'phone' if is_phone? %>">

Затем в таблице стилей создать раздел для мобильных стилей

body { 
    &.phone { 
    /* your phone-specific styles go here */ 
    } 
}

Кроме того, я заметил, что вы отметили свой вопрос с помощью Bootstrap, который является res пончивость из коробки. Здесь есть хорошая документация, в которой объясняется, как сделать отзывчивый стиль с использованием рамки: http://getbootstrap.com/css/#grid

источник

2015-04-15 19:32:02

Rendring banner image с текстом для разного разрешения мобильного экрана

ответ

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