Реализация страницы из psd пропорционально

Question

Когда я получаю psd (1750 * 2400), я обнаружил, что изображения и размер шрифта были слишком большими для более низкого разрешения. Возможно ли, чтобы страница соответствовала разному разрешению? Благодарю.

Answer 1

Обычно я разделяю это на 2. Я имею в виду, что размер веб-сайта в этой ситуации составляет 875x1200. Таким образом, для каждой спецификации, такой как шрифты, ширина блока, ширина изображения должна быть разделена на 2.

Например, размер шрифта заголовка составляет 42 пикселя, тогда вы можете применить 21px.

Answer 2

Для изображений вы можете сделать это исключительно с помощью CSS, указав ширину и высоту ваших предпочтений. Браузер изменит размер изображения (хотя, если вы не выберете правильное соотношение сторон, изображение может выглядеть явно расширенным или сжатым).

img { 
height: 300px; //whatever height you want 
width: 200px //whatever width you want 
} 

Для гибкой компоновки вы можете использовать мультимедийные запросы CSS3 для наилучшего просмотра различных разрешений.

Пример реагирующих раскладок:

img { 
    height: 100%; 
    width:100% 
} 

@media screen and (max-width:64em) { 
    height: 70%; 
    width: 70% 
} 

Что касается размера шрифта, вы, возможно, придется пожертвовать пиксель-совершенства в разы за лучший внешний вид и решить для себя, выглядит ли шрифт подходит для отображения или не.

Это тоже можно управлять с помощью медиа запросов, хотя:

@media screen and (max-width: 32em) { 
    font-size: 1.5em 
}