双端适配方案（移动端与PC端）

一、布局方案

1、响应式布局

根据屏幕不同尺寸动态调整尺寸和排列，来响应不同的布局，通过一套代码来实现，一般借助bootstrap或者栅栏布局来实现。

2、自适应布局

根据判断不同的设备类型，动态显示不同的代码来实现，通过多套代码。比如通过判断是移动端还是PC端来显示不同的代码，可以是前端判断，也可以是后端判断返回对应的两套代码。

不论是响应式布局还是自适应布局其目的都是去解决各种屏幕尺寸下的显示问题，没有必要区分那么清，你可以在一个项目里使用多种方式来适配你的项目，只要能够满足业务需求使用那种方式都可以。

二、适配方案

目前常见的适配方案有多端适配和响应式布局适配，多端适配一般是适配移动端、平板、PC三种尺寸，根据media来实现不同的样式，或者通过js来动态判断显示哪种布局代码，常见的是这三种尺寸，当然也有更多尺寸的适配，但是有时候常见的就只适配移动端和PC端两种类型。响应式布局一般只需要使用一套代码，这种页面布局往往比较简单，页面结构清晰，可以很好的根据尺寸进行响应显示不同布局，比如使用bootstrap布局和栅栏布局等。相比较而言多端适配适合更复杂的场景，能应对常见的官网适配，所以目前主要适配方案是以多端适配为主，响应式布局只在PC端简单配合某些页面适配。

一般官网设计都是以PC为主，移动端能正常浏览就可以，PC端适配为了应对电脑的各种尺寸都是以1200或1400布局为主，内容居中，限制最小宽度，这也是大部分主流网站布局。而移动端为了适配手机各种尺寸，一般采用viewport来进行布局，这样移动端和PC的用法也就统一了，不再通过flexible动态计算rem。

从上面我们可以探讨出两种官网的适配方案，第一种是简单的，以PC端只写一套代码，通过media简单适配移动端，让移动端保持不变形即可，此方案可以快速对多端进行适配。另一种方案就是比较麻烦的适配，使用多套代码，移动端一套代码，PC端一套代码，两套代码互不影响，可以分开部署通过后端判断返回访问不同的地址，也可以写在一起，在访问时前端动态判断访问哪种模式，当然这种方式不如分开部署好。

三、设计要求

1、PC端

网站的PC端页面一般以1200或者1400以内为主体内容区域，居中布局，两边留白来适配不同电脑尺寸，网站整体以这个尺寸为最小尺寸来保证页面内容不变形可以正常访问，如果是整屏布局或者宽度超出这个最小尺寸的布局，内容最好不要使用具体尺寸，因为随着屏幕尺寸变化无法兼容最小值，所以最好使用百分比等大致的阈值，比如banner图、背景图、背景特效这些可以全屏，但里面的文字内容是以居中布局体现的。如果某些布局无法实现居中布局并且要根据尺寸变化而变化，这时可以考虑响应式或者media来实现此块布局。

还有如果要考虑适配移动端的话，网站设计风格要偏向简约，结构布局简单，模块清晰好区分，不要设计难以变动和分离的布局。

2、移动端

移动端设计稿尺寸一般以640x1136或750x1334为基准，设计要美观大方，不臃肿，清晰明了操作简单。前端实现一般使用viewport布局方式布局，全部使用vw尺寸，把设计稿px转为vw尺寸来实现，可以借助less/sass或者插件来自动转译。图片一般使用二倍图为基准，有大小要求时最少要保证小图标要使用二倍图。虽然现在网络快了，但是为了性能，不要大量使用图片，不要堆大量代码，不要引入各种插件库。

四、SEO优化

seo优化老生常谈，目前有几种解决方案：

1、原生实现，不依赖框架，纯html、css开发，这样爬虫能爬取网站所有内容。

2、使用vue/react框架开发，但是这种页面无法直接加载全部页面代码，需要借助预渲染插件提前渲染好静态页面来达到seo优化功能，但实现不够完美。

3、借助某些库实现静态化页面，比如Nuxt.js

4、SSR服务端渲染

5、后端爬虫服务配置