Okay so I am in a dilemma an need advice from professionals.
Beginner at web design.
When converting PSDs to html/css I am using exact padding ratios from (px to rem) the PSD mockup.
Looks great in the
320pxwidth document (as per mockup specs).Setting a base font-size for different screen sizes in
htmltag
i.e.320pxwidth has a10pxfont-size,12pxat399pxscreen size,
etc. Font-size is in rem so everything is relative to base font.
Again, seems responsive.
Here is the problem
Since everything padding and width is exact portions relative to initial 320px (initial mockup document), I have to have to many break points and have to increase html font size too frequently so the portions are the same relative to new screen size.
It a little excessive and seems like the wrong approach. What is the standard approach to having the "pixel perfect" proportions without having excessive breakpoints?
Potential solutions I'm considering
- Use proportions from psd mockup for padding/margins and keep the
width fluid i.e. use
text-align: centerinstead of giving exact width i.e.width: Xrem;(as I have to increase width excessively for greater breakpoints.
Requirement: Create a pixel perfect web design from PSDs (as realistic as possible) and be responsive without have to back excessive breakpoints.
What is the standard approach, what should be exact ratios e.x margin/padding and what should be fluid e.x width?
EDIT: Made a JS Snippet below but doesn't display different breakpoints.
Here is an example (Consider the blue div, that is .sec-1 which is pixel perfect to PSD MOCKUP (320px)
html
<div class="sec-1">
<div class="col-1">
<h1>Introducing 'Keeva' world's smartest assistant.</h1>
<h2>Keeva smartphone app helps you organize your work schedule, meetings, project deadlines and much more.</h2>
</div>
<div class="col-2">
<!-- Download Buttons -->
<div class="download-wrap">
<!-- playstore icon -->
<picture>
<source media="(min-width: 320px)" srcset="http://via.placeholder.com/97x31">
<!-- <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
--> <img class="download-btns" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
<!-- appstore icon -->
<picture>
<source media="(min-width: 320px)" srcset="http://via.placeholder.com/97x31">
<!-- <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
--> <img class="download-btns" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</div>
<!-- iphone 1 image wrap -->
<div class="hero-img">
<!-- iphone image -->
<picture>
<source media="(min-width: 320px)" srcset="http://via.placeholder.com/142x142">
<!-- <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
--> <img class="phone-img" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</div>
</div>
CSS
/* BASIC ELEMENTS */
* {
padding: 0;
margin: 0;
}
html {
font-family: 'Roboto', sans-serif;
font-size: 10px;
}
h1 {
font-size: 2rem;
text-align: center;
}
h2, h3 {
font-size: 1.6rem;
font-weight: normal;
text-align: center;
}
h3 {
font-weight: bold;
}
h4{
font-size: 1.5rem;
font-weight: normal;
text-align: center;
}
/* SECTION ONE */
.sec-1 {
background-color: #2094d0;
display: flex;
flex-direction: column;
text-align: center;
}
.col-1 h1 {
padding-top: 15px;
padding-left: 4.3rem;
width: 23.8rem;
text-align: center;
}
.col-1 h2 {
padding-top: 2.7rem;
padding-bottom: 1.1rem;
padding-left: 1rem;
width: 29.9rem;
}
.col-2 {
display: flex;
flex-direction: row;
align-items: center;
}
/* HERO IPHONE IMAGE */
.phone-img {
padding-right: 1rem;
margin-bottom: -3px;
}
/* DOWNLOAD BTNS */
.download-wrap {
padding: 1rem;
}
/* SECTION THREE */
.sec-3 {
background-color: #f1eeee;
}
/* MEDIA QUERIES */
@media(min-width: 399px) {
html {
font-size: 12px;
}
} <div class="sec-1">
<div class="col-1">
<h1>Introducing 'Keeva' world's smartest assistant.</h1>
<h2>Keeva smartphone app helps you organize your work schedule, meetings, project deadlines and much more.</h2>
</div>
<div class="col-2">
<!-- Download Buttons -->
<div class="download-wrap">
<!-- playstore icon -->
<picture>
<source media="(min-width: 320px)" srcset="http://via.placeholder.com/97x31">
<!-- <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
--> <img class="download-btns" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
<!-- appstore icon -->
<picture>
<source media="(min-width: 320px)" srcset="http://via.placeholder.com/97x31">
<!-- <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
--> <img class="download-btns" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</div>
<!-- iphone 1 image wrap -->
<div class="hero-img">
<!-- iphone image -->
<picture>
<source media="(min-width: 320px)" srcset="http://via.placeholder.com/142x142">
<!-- <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
--> <img class="phone-img" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</div>
</div>