急求！！！！页面自适应该如何下手？万分感谢

Question

从PC到移动的页面自适应是怎么做的？？从排版布局都是怎么实现的？？

Answer 1

首要要搞清楚目标项目的特性，主要看做成自适应的必要性、时间成本、复杂度。比如管理系统这一类强调功能的项目要做成自适应的必要性就不太高，因为一般移动端上不太会负载重量功能，所以将它完全移植到APP是不适宜的，也就没有必要去处理过多的自适应问题。商城、论坛博客等一些交互性较强的项目就比较容易做成自适应的，页面组成元素很容易规范，需要多端应用并且各个端数据高度同步，体验要保证一致，这样的项目采用自适应的开发方式也比较节约成本。搞清楚项目的性质之后就可以去制定自适应的方案。比如是整体自适应还是局部自适应。像使用网格排版(好奇心日报)或列表排版(CNode)的页面就可以用整体自适应布局方案，因为页面所有的元素都是规格统一，变化少。如果是团队项目这一步骤主要还是由产品和UI决定，除非产品允许多端可以做成一模一样的效果，否则一般移动端相对PC多少都还是会有些变化的，也就是说可能要写两套样式。选择自适应技术。主要来讲有相对单位、媒体查询、flex或grid。媒体查询在复杂点的页面组成元素布局自适应时其实是比较强大的，比如你在PC上有一个顶部导航栏，而在移动端上它需要折叠成一个隐藏的按钮，类似这种有特殊屏幕要求的一般只能用媒体查询来制定不同的样式。元素单一的项目适合用后面两种。按照自己的需求，可以混合使用这几种技术。总体来讲，页面元素比较复杂多样的项目一般采用混合型的，简单的项目采用单一的布局。这一步就可以落实到样式中，决定每一个元素的具体布局样式。

Answer 2

1、采用百分比或者采用flex布局2、字体采用em,rem3、页面中模块，都直接采用组件库里面的，没有再自己写4、小图标采用字体图标，防止模糊不清5、图片都采用两倍或者三倍，具体看要求。如果有多套设计，采用多套图，如果就一套设计，就直接采用两倍图。这个图片的大小，就是UI的事了，一般的UI都知道。差不多就这些