建立一个“像素完美”和响应的网页设计从PSD？

Question

好吧，所以我进退两难，需要专业人士的建议。

网页设计初学者。

• 当将PSD转换为html/css时，我使用的是精确的填充比率，从px到rem，PSD模型。
• 在320px宽度文档中看起来很棒(按照模型规范)。
• 在html标记中为不同屏幕大小设置基本字体大小 即320px宽度具有10px字体大小，12px具有399px屏幕大小， 字体大小是对的，所以所有的东西都是相对于基本字体。 又一次，似乎有反应。

这里是问题

由于所有填充和宽度都是相对于初始320 so (初始模拟文档)的精确部分，所以我必须有许多断点，并且必须频繁地增加html字体大小，因此相对于新屏幕大小而言，这些部分是相同的。

它有点过分，似乎是错误的方法。在没有过多断点的情况下，拥有“像素完美”比例的标准方法是什么？

我正在考虑的潜在解决方案

• 使用来自psd模型的比例作为填充/边距，并保持宽度流体，即使用text-align: center，而不是提供确切的宽度，即width: Xrem; (因为我必须对更大的断点过度增加宽度。

Requirement:从PSD中创建了一个像素完美的网页设计(尽可能逼真)，并且响应性好，无需支持过多的断点。

标准的方法是什么，确切的比率是多少？

编辑:在下面创建了一个JS片段，但不显示不同的断点.

这里是一个例子(考虑一下蓝色div，即..sec 1，它的像素非常适合PSD模拟(320 to ))。

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>

​

Answer 1

首先，当我们对HTML做PSD时，首先需要检查设计者创建的所有网格结构是否正确，通过添加列、边框等每个点。

1. 检查psd的基本布局
2. 如果设计师给出了平板电脑和移动设备的基本分辨率设计，那么它是好的和好的。如果没有，那就问问他/她在移动和平板电脑上应该是怎样的。
3. 如果您不想放置大量的媒体查询，那么您可以参考此链接

Answer 2

不要浪费时间拥有像素完美，它不存在。专注于细节和响应部件及用户体验。避免所有那些营销，销售，甚至狡猾的首席执行官要求像素完美的实现。