网站PC版和移动版的模板方案 · 前端笔记

## 网站PC版和移动版的模板方案 ### 网页实现PC端和移动端的两种方案 #### 1：自适应越开越多的网页使用自适应技术开发，我们可以通过一套自适应网页来适应PC端和移动端，但是要注意自适应技术的局限性，阅读展示类网站可以做成自适应，但是功能性，交互性较强的页面就不适合了，比如商城，商品详情页，这样的页面用自适应来做，代码量很臃肿。此时只能使用第二种方案。 * * * * * #### 2：PC和移动端分离开发这种情况，里面又会涉及到多个问题了，不同设备访问时，url会不会变化，要不要做跳转。应用是否分离，PC端和移动端应用分离开发，比如模块分离开发也可以（tpshop就是分模块，但是跳转了）。分离主要有两种方式，模板分离，应用分离。简单的做法就是模板分离，同一套程序，只不过有两套模板，根据客户端类型，渲染不同的模板，这样用户看起来网址是一样的，但是不同设备访问时模板界面不一样。V1就是那样做的。但这种有很明显的缺点，有的PC端和移动端的同一个业务页面功能性/页面结构/展示内容也会有很大差别，直接套同一个应用（控制器），只是模板不同，这样显然是不可取的，很多时候移动端和PC端所需要的数据都不同，并且移动端更多的是接口开发，所以这种方式非常低效。第二种就是应用（模块）分离开发了，这种最灵活科学，PC端功能和移动端没有重耦合。再要思考的问题就是url了，要不要分url。有的人觉得有必要分url，既然应用分开的，那就应该区分，这样对用户体验好。并且可能会出现有的页面PC端有，移动端没有，不过一般用于分享传播的页面，PC端和移动端都是有的。比如对于同一个页面，移动端和PC端有如下的url： m.xxx.com/ac/12.html www.xxx.com/ac/12.html 当用户设备访问到不对应的url时，应该跳转，那这个跳转时客户端的js跳转还是服务端的重定向呢，服务端的重定向比较好，有时候两套url的对应不像上面那样规整，需要服务端自己转换了。也有人觉得为了提供统一一致的服务，移动端和pc端尽管展示不同的模板，但是url保持一致不需要有区别，GitHub就是这样的。 > 如果不想跳转url，不用响应式，用两套模板，但不想共用控制器，那么可以请求一开始就用拦截器，检测到是移动端访问时，绑定模块mobile，否则就是pc模块，这样就不用url跳转来切换模块了。 * * * * * ### 移动端wap全部用静态模板基于shopnc的好商城，移动端直接 http://v5.33hao.com/wap （index.html）都是静态文件，连控制器都不需要，都不需要经过PHP处理，直接nginx就可以。功能都是调用接口，模板是前端根据数据自己渲染的（使用artTemplate模板引擎），和APP共用一套接口。简直不要太方便。 >[danger] 这是前后端分离。但是分离后是否也存在一个问题，比如微信端授权登录还是要调到动态文件上做授权操作的，还有微信支付等，需要尝试一下，如果可以，那就可以完全做到前后端分离了，这样前端直接使用前端自动化工具开发就好了，全部使用后台接口。还有，传统插件模块开发可能对前后端分离不友好。 * * * * * ### 扩展 [哔哩哔哩（B站）的前端之路](https://m.toutiaocdn.com/group/6580148672208568846/?iid=33124962994&app=news_article_lite&timestamp=1532108136&wxshare_count=1&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_android&utm_campaign=client_share) [php - 网站模板应该分为PC版和WAP版吗？ - SegmentFault](https://segmentfault.com/q/1010000003026926) [php - 有PC版的网站如何做一套手机版的网站出来 - SegmentFault](https://segmentfault.com/q/1010000004043075) [互联网分层架构，为啥要前后端分离？ - 架构师之路](http://mp.weixin.qq.com/s/Nhyo969WnEwyCWpr34ECcA) [分层架构，前后端分离有啥坏处？](http://mp.weixin.qq.com/s/ZKjKUkWkNqxiwNEjBDXtiQ) [服务端渲染 vs 客户端渲染](http://mp.weixin.qq.com/s/I28GlXxzC1aT0LeXVfCThw) [一分钟了解互联网动静分离架构](https://mp.weixin.qq.com/s/Kpsq8MH2TvXQEECyGrmj9A) [浅谈响应式Web设计与实现思路 – 熊建刚的博客](http://blog.codingplayboy.com/2018/01/06/responsive-web-design/) [浅谈响应式Web设计与实现思路](https://www.toutiao.com/a6508149161299280398/?tt_from=weixin&utm_campaign=client_share&timestamp=1515350460&app=news_article&utm_source=weixin&iid=22069500288&utm_medium=toutiao_android&wxshare_count=1) [利用Nuxt.js创建服务端渲染的Vue.js应用程序](https://mp.weixin.qq.com/s/HCOIjWDSjJIKPsjJO3LKmQ) [理解模板引擎](https://mp.weixin.qq.com/s/U0c79XHFYPeie0a7ucOPbQ) ~~~ 自适应vs响应式自适应和响应式设计的不同主要概括如下：自适应是多套用户界面，而后者则只有一套用户界面；自适应需要服务端检测请求设备分辨率相关信息，然后选择对应版本返回；自适应可以在不同版本使用不同适配方案，如在PC端使用百分比，在移动端使用rem等，而响应式则需要一个完美兼容的适配方案； ~~~ > 特别注意的是margin,padding属性值为百分比时，是基于当前元素width值的。%单位也是一个缩放单位，所以也常用于样式适配。 >[tip] 错！！！只有padding才是基于当前元素的，margin和width一样，都是基于父元素的。 >[danger] **自适应和响应式不是一个东西。** > 自适应、响应式、适配都是为了展示最好的前端效果，即在每一种设备上，都极力呈现出最好的效果。这个最好的效果，指的是，在各终端表现出最好的视觉效果，以及最合适、最方便的操作习惯。 **自适应，响应式，屏幕适配，这是三个独立不同的概念。** 自适应是多端返回不同的页面，需要多套程序或者多套模板。响应式主要是利用css媒体查询。适配主要是应用于对完美还原设计稿尺寸有要求的页面，主要是利用 flexible.js、rem、vm等技术。 * * * * * last update：2018-7-12 14:03:27