Используйте px или% для отзывчивого дизайна

Привет, мне интересно, могу ли я использовать px или% для отзывчивого дизайна. Я уже использовал px, но он недостаточно отзывчив, потому что его размер исправлен, может кто-нибудь сказать мне, что лучше использовать для гибкого дизайна? im new для html и css, а также создание студенческого портала для моей диссертации.Используйте px или% для отзывчивого дизайна

вот примеры моего проекта, я использовал px для определения некоторых элементов здесь. Я думаю, что есть и другие способы сделать это, и трудно делать медиа-запросы, потому что вы будете делать это один за другим. Может ли кто-нибудь дать мне идеи?

и вот 480px

вот пример моих запросов ...

/* Smartphones (portrait and landscape) ----------- */ 
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) { 
    .img-responsive{ 
    width: 230px; 
    height: 55px; 
    padding-left: 20px; 
    padding-top: 5px; 
    } 
    .footer{ 
    height: auto; 
    } 
    .connect{ 
    padding-left: 70px; 
    } 
    .contact{ 
    padding-left: 90px; 
    padding-right:50px; 
    padding-top: 70px; 
    } 
    .visit{ 
    padding-top:40px; 
    padding-left: 110px; 
    } 
    p{ 
    padding-left: 40px; 

    } 
    .twitter-hover { 
    background-image: url('images/twitter-hover.png'); 
    margin-left: 70px; 
    } 
    .social-slide{ 
    margin-bottom: 50px; 
    } 
    hr.carved { 
    margin-top: 4em; 
    } 
    .copyr{ 
    padding-left: 20px; 
    padding-right: 10px; 
    } 
    }

источник

2016-04-24 nethken

Если вы создаете портал для своего тезиса, по крайней мере, один из вопросов, на которые вам придется ответить, когда вы представляете его, будет касаться отзывчивости. Как вы собираетесь на это ответить? Я сделал это **, потому что какой-то парень на SO так сказал мне? Когда учеба и исследования для диссертации стали устаревшими? Это может стать шоком, но пиксель на самом деле является углом. Возможно, вы захотите начать чтение. –

Я просто ищу предложения и идеи сэр, потому что я новичок в html и css. это плохо? – nethken

Нет, это не так.Все, о чем я говорю, это то, что SO не является подходящим типом справки для диссертации. Вам нужно исследовать его и быть готовым должным образом. Желаю вам удачи в вашем проекте, и я надеюсь, что мое вмешательство поможет вам. Что касается вашего вопроса, мой личный совет - использовать «rem» для уровней реагирования. Возможно, вы захотите взглянуть на Twitter Bootstrap 4. –

Хорошей практикой является использование %, где он может потому что это уменьшает усилие написания другого кода для реагирования, поскольку оно работает в соответствии с экраном s ize, но мы используем px также где % мы не можем использовать %, а затем в @media запросах мы пишем еще один css для этого в соответствии с размерами экрана.

Для примера

Предположим, что нам нужно сделать 2 половину ширины DIV внутри полной ширины DIV мы можем записать его в % как этот

HTML

<div class="parent"> 
    <div class="child"> 
    </div> 
    <div class="child"> 
    </div> 
</div>

Css

.parent{ 
    width:100%; 
} 
.child{ 
    width:50%; 
}

Выше % Успешно, потому что он изменит размер в соответствии с размером экрана.

В некоторых случаях мы не может использовать % как мы создаем кнопку в DIV, который должен быть ширина затруднительной и высота, то мы можем просто использовать px в ширине и, если необходимо изменить размер в меньшем экране, то просто используйте @media запросов.

@media запросы могут быть использованы множественным с экрана определяет размеры

Read THIS для коротких около @media запросов.

источник

2016-04-24 01:04:15

Как насчет текста и ссылок сэр? im, используя padding и px для этого. – nethken

кроме '%' и 'px' есть еще одно свойство' em' использовать его и читать это для справки http://stackoverflow.com/questions/15649244/responsive-font-size –

Aggrwal. Привет сэр. Я попытался запустить свой проект в хром-инструменты для разработчиков, поскольку мобильные и медиа-запросы работают, но когда я пытался работать как рабочий стол с тем же размером, что и мобильный, он не работает. Я пытаюсь сказать, как я могу это сделать с помощью рабочего стола? разные запросы? Если этот комментарий изменит тему, просто удалите его. – nethken

Используйте px или% для отзывчивого дизайна

ответ

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