前端页面开发浅谈：PC 端设计如何“完美”迁移到移动端？_实现pc和移动端

			</div>
			<div class="login-form-item">
				<span class="login-form-item-label">密码</span>
				<input class="login-form-item-input">
			</div>
			<div class="login-form-btn">提交</div>
		</div>
	</div>

可能现在有很多人已经有了吐槽的想法，哈哈，别急，我们往下面走！


我们将分别从**页面布局、编码和流程**几个方面对上面的例子进行分析。


## 三、前端学习不是造火箭


对于前端内容的学习，可能有人会说，**前端内容太难了，技术点与层出不尽的框架太多、太杂了**。


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210512193806654.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55m96bm_56ys5LiA5biF,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)  
 但是呢，**搞前端不是造火箭，不需要你是天才选手，只要掌握了一定规律，一样可以上天入地**。


## 四、前端的布局设计


**设计师提供的只是设计稿，真正的布局要程序员自己实现。**


更何况要是遇到可以自由发挥的项目，种种样式可不要太“精彩”。


## 五、PC 端迁移到移动端的问题与挑战


绝大多数同学对于 H5 的初步学习与应用是基于 PC 端，而 **PC 端迁移到移动端是存在一些轻微的修改与更正的**，我们将在如下的内容中结合上面的案例进行分析。


### 5.1、手机屏幕的展示方式


手机屏幕的展示方式较于 PC 端的改变我们将其归类为**小、大、长、短**四类。


#### 5.1.1、尺寸更小、宽度更窄


随着时代的发展与科技的进步，现在的手机厂商已经摒弃了当初的 pad 大屏，转向相较于 PC 机小巧很多的 cellphone，这就**限制了手机屏幕所承载的内容是有限的**。


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210512193836531.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55m96bm_56ys5LiA5biF,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)


#### 5.1.2、页面的内容更大


为了大大提升用户与系统的交互性，PC 端到移动端的迁移，就需要将原本在 PC 端上的内容做更大的调整。比如我们常见的在 PC 端的字号为 12、14 号字，而在移动端就需要再放大 2 号以满足用户的阅览需求。当然，我们可以在 CSS 根节点的的样式里面进行统一调整。


而页面内容更大的挑战不仅仅存在于字号、字体方面，其他的诸如对齐方式、线条、图标等等，一些在 PC 端很小的瑕疵可能会在移动端被用户无限放大甚至是产生新的问题，这都是完全有可能的，这就对开发人员提出了更深层次的要求。


![在这里插入图片描述](https://img-blog.csdnimg.cn/2021051219404752.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55m96bm_56ys5LiA5biF