从 PSD 构建“像素完美”和响应式网页设计？ [关闭]

Question

好的，所以我处于两难境地，需要专业人士的建议。

网页设计初学者。

• 在将 PSD 转换为 html/css 时，我使用的是来自 （px 到 rem）PSD 模型。

• 在 320px 宽度文档中看起来很棒（根据模型规范）。

• 在html 标签中为不同的屏幕尺寸设置基本字体大小
  即320px 宽度具有10px 字体大小，12px 399px 屏幕大小，
  等等。字体大小以 rem 为单位，所以一切都与基本字体相关。
  再次，似乎反应灵敏。

问题来了

由于所有填充和宽度都是相对于初始 320 像素（初始模型文档）的精确部分，因此我必须有很多断点并且必须过于频繁地增加 html 字体大小，因此这些部分相对于新屏幕大小是相同的。

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

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

• 使用 psd 模型中的比例作为填充/边距并保留 宽度流体，即使用text-align: center 而不是给出精确的 宽度即width: Xrem;（因为我必须过度增加宽度 以获得更大的断点。

要求：从 PSD 创建一个像素完美的网页设计（尽可能逼真）并且响应迅速，无需支持过多的断点。

什么是标准方法，什么应该是精确的比率，例如边距/填充，什么应该是流动的，例如宽度？

编辑：在下面制作了一个 JS 片段，但不显示不同的断点。

这是一个示例（考虑蓝色 div，即 .sec-1，它与 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>

Answer 1

不要浪费时间让像素完美，它不存在。专注于细节和响应部分和用户体验。避免所有那些要求像素完美实施的营销、销售甚至狡猾的 CEO。

Answer 2

首先，当我们将 PSD 转为 HTML 时，首先需要通过添加每个点（如列、边框等）来检查设计师制作的所有网格结构是否正确。

1. 检查 psd 的基本布局
2. 如果设计师为平板电脑和移动设备提供基本分辨率的设计，那就太好了。如果不是，请询问他/她在移动设备和平板电脑上的表现如何。
3. 如果你不想放很多媒体查询，那么你可以参考this link