1
私はジレンマの専門家からのアドバイスが必要です。PSDから「ピクセル完璧」かつ反応性の高いウェブデザインを構築しますか？
Webデザインの初心者。
、私は（REMにPX） からPSDモックアップを正確パディング比を使用していたHTML/CSSへのPSDを変換する場合。
320pxの幅広いドキュメント（モックアップ仕様による）でうまくいきます。すべてがあるので
等フォントサイズはREMである
すなわち320px幅が10pxフォントサイズを有し、399px画面サイズで12px、htmlタグに異なる画面サイズ用のベースフォントサイズを設定しますベースフォントに関連しています。
再び、反応するようです。
ここでは、問題
すべてのパディングと幅が320ピクセル（初期モックアップ文書）当初の相対正確な部分ですので、私は多くのブレークポイントを持っている必要がありますし、HTMLフォントサイズを大きくしなければならないですあまりにも頻繁に、その部分は新しい画面サイズに対して同じです。
少し余計に間違ったアプローチのようです。過剰なブレークポイントを持たずに「ピクセル完璧」の比率を得るための標準的なアプローチは何ですか？
潜在的なソリューション私はパディング/マージンのためのPSDモックアップから
- 使用割合を考慮すると、私は過度に幅を大きくする必要があるとして、（代わりに
width: Xrem;すなわち正確な 幅を与えるのtext-align: centerを使っすなわち 幅流体を保持しています。大きなブレークポイントのため
要件： possiとして現実的として（のPSDからの画素完璧なWebデザインを作成します。ブレークポイントを過度に戻さなくても応答性があります。
標準的なアプローチは何ですか。正確な比率e.x margin/paddingとfluid e.x widthとは何ですか？
EDIT：下にJSスニペットを作成しましたが、異なるブレークポイントは表示されません。
ここでは例を示します（青いdivを考えてみましょう。秒-1 PSDモックアップに最適なピクセルである（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 */
* {
\t padding: 0;
\t margin: 0;
}
html {
\t font-family: 'Roboto', sans-serif;
\t font-size: 10px;
}
h1 {
\t font-size: 2rem;
\t text-align: center;
}
h2, h3 {
\t font-size: 1.6rem;
\t font-weight: normal;
\t text-align: center;
}
h3 {
\t font-weight: bold;
}
h4{
\t font-size: 1.5rem;
\t font-weight: normal;
\t text-align: center;
}
/* SECTION ONE */
.sec-1 {
\t background-color: #2094d0;
\t display: flex;
\t flex-direction: column;
\t text-align: center;
}
.col-1 h1 {
\t padding-top: 15px;
\t padding-left: 4.3rem;
\t width: 23.8rem;
\t text-align: center;
}
.col-1 h2 {
\t padding-top: 2.7rem;
\t padding-bottom: 1.1rem;
\t padding-left: 1rem;
\t width: 29.9rem;
}
.col-2 {
\t display: flex;
\t flex-direction: row;
\t align-items: center;
}
/* HERO IPHONE IMAGE */
.phone-img {
\t padding-right: 1rem;
\t margin-bottom: -3px;
}
/* DOWNLOAD BTNS */
.download-wrap {
\t padding: 1rem;
}
/* SECTION THREE */
.sec-3 {
\t background-color: #f1eeee;
}
/* MEDIA QUERIES */
@media(min-width: 399px) {
\t html {
\t \t font-size: 12px;
\t }
}\t \t <div class="sec-1">
\t \t \t <div class="col-1">
\t \t \t \t <h1>Introducing 'Keeva' world's smartest assistant.</h1>
\t \t \t \t <h2>Keeva smartphone app helps you organize your work schedule, meetings, project deadlines and much more.</h2> \t
\t \t \t </div>
\t \t \t <div class="col-2">
\t \t \t <!-- Download Buttons -->
\t \t \t \t <div class="download-wrap">
\t \t \t \t <!-- playstore icon -->
\t \t \t \t \t <picture>
\t \t \t \t <source media="(min-width: 320px)" srcset="http://via.placeholder.com/97x31">
\t <!-- \t \t \t \t \t \t <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
\t --> \t \t \t \t \t \t <img class="download-btns" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
\t \t \t \t </picture>
\t \t \t \t <!-- appstore icon -->
\t \t \t \t \t <picture>
\t \t \t \t <source media="(min-width: 320px)" srcset="http://via.placeholder.com/97x31">
\t <!-- \t \t \t \t \t \t <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
\t --> \t \t \t \t \t \t <img class="download-btns" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
\t \t \t \t </picture>
\t \t \t \t </div> \t
\t \t \t \t \t <!-- iphone 1 image wrap -->
\t \t \t \t <div class="hero-img">
\t \t \t \t <!-- iphone image -->
\t \t \t \t \t <picture>
\t \t \t \t \t \t <source media="(min-width: 320px)" srcset="http://via.placeholder.com/142x142">
\t \t \t <!-- \t \t \t \t \t \t <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
\t \t \t --> \t \t \t \t \t \t <img class="phone-img" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
\t \t \t \t \t </picture>
\t \t \t \t </div>
\t \t \t \t
\t \t \t </div>