Question

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

网页设计初学者。

将PSD转换为html / css时，我使用的是精确的填充比率（px to rem）PSD模型。
在320px宽度文档中看起来很棒（根据模型规范）。
在html标签中为不同的屏幕尺寸设置基本字体大小即320px宽度为10px字体大小，12px屏幕大小为399px，等等。字体大小是rem，所以一切都与基本字体有关。
再次，似乎反应灵敏。

以下是问题

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

有点过分，似乎是错误的做法。使＆＃34;像素完美的标准方法是什么？比例没有过多的断点？

我考虑的潜在解决方案

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

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

标准方法是什么，应该是什么样的精确比率e.x margin / padding以及什么应该是流体e.x宽度？

编辑：在下面制作了一个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

＆＃13;

/* 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;
 	}

}

＆＃13;

		<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>

＆＃13;

Answer 1

首先，当我们将PSD转换为HTML时，首先需要通过添加每个点（如列，边框等）来检查设计者所做的所有网格结构是否正确。 1）检查psd的基本布局** 2）**如果设计师为平板电脑和移动设备提供基本分辨率的设计，那么它就是好的。如果没有，那么问他/她应该如何在移动和平板电脑。 ** 3）**如果您不想放置大量媒体查询，那么您可以参考此链接https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

构建一个完美的像素＆＃34;来自PSD的响应式网页设计？

1 个答案: