PC端网站，手机版网站，APP，三者可以实现共用同一数据库，能同步更新吗

一般网站实现pc端与移动端适配的需求，方案有两个：1、一套页面，从设计时就考虑到跨设备适配，响应式的一步到位；2、开发两套页面，根据设备尺寸加载加载不同的资源，目前已经不常见了。

一、PC端网站，手机版网站，APP，三者可以实现共用同一数据库同步更新

一般网站实现pc端与移动端适配的需求，方案有两个：

1、一套页面，从设计时就考虑到跨设备适配，响应式的一步到位；

2、开发两套页面，根据设备尺寸加载加载不同的资源，目前已经不常见了；

响应式方案

做一个响应式的页面。即只用一个链接，用媒体查询来控制样式。同一个链接pc和移动端打开都可以适配，有的模块是用两套不一样的css样式。

最近做了一个匹配平板和手机的页面，我用的媒体查询是768px。因为ipad的尺寸是1366*768

1. 当设备宽度最大是768时说明该设备是手机或者是平板的竖屏，用一套样式；
2. 如果设备宽度最小是768时，说明是平板横屏或者电脑屏幕，用另外一套样式。如下

@media only screen

and (min-device-width : 768px){

   .PaperTitle{

       padding: 0 8rem;

   }

}

@media only screen

and (max-device-width : 768px) {

    .PaperTitle{

    padding: 0 3rem;

    }

}

如果要用响应式的效果，较好从UI设计时就考虑到适配问题。设置宽度时，注意尽量用比率代替具体的数字。多测试页面在不同分辨率下的宽度展示效果。

比如网页的内容宽度其实是1100px，两边就做留白处理。不管用户的电脑有多宽，我们展示完1100px宽度的网页后，让网页居中，剩下的宽度平分在两边即可。这样我们能保证网页内的各个空间宽度比例在较好的范围内。

以前很多设计网页内容的宽度是铺满整个屏幕的，在现在的带鱼屏上就会把网页拉伸的非常难看。

做两套页面的方案

对外宣传用同一个链接，但是该链接在移动端与pc端打开，会分别自动跳转到两个不同的详细的链接。

js判断是pc或移动端核心代码如下：

<script type=”text/javascript”>

   var os = function () {

       var ua = navigator.userAgent,

       isWindowsPhone = /(?:Windows Phone)/.test(ua),

       isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,

       isAndroid = /(?:Android)/.test(ua),

       isFireFox = /(?:Firefox)/.test(ua),

       isChrome = /(?:Chrome|CriOS)/.test(ua),

       isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid &&       !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),

       isPhone = /(?:iPhone)/.test(ua) && !isTablet,

       isPc = !isPhone && !isAndroid && !isSymbian;

       return {

              isTablet: isTablet,

              isPhone: isPhone,

              isAndroid: isAndroid,

              isPc: isPc

       };

   }();

   // pc时加载一套页面

   if(os.isPc){

      location.replace(“http://www.onlymid.com.cn/”);

   }

   // 移动端时加载另外一套页面

   if (os.isAndroid || os.isPhone) {

      location.replace(‘http://www.onlymid.com.cn/html/2016shujia/wap/’);

   } else if (os.isTablet) {

      location.replace(‘http://www.onlymid.com.cn/html/2016shujia/wap/’);

   }

</script>

响应式案例

1：个人博客用户端

下面的博客是我自己开发的，我不懂UI设计，页面都是自己凭感觉拼凑出来的。我的想法是移动端屏幕较小，能展示的内容有限。移动端需要突出重点，放弃一些辅助功能。

2：管理后台

对于管理后台的移动端适配，我觉得主要在菜单这块。PC端管理后台一般都是侧边导航栏，移动端当然是放不下的，所以为了响应式展示，页面的整个架构要注意调整。

其余依旧是对某些非必要的功能做删除与合并，比如我删掉了几个入口，也把切换账号功能有独立的位置区域合并到菜单里。对于管理后台的响应式开发，是会比用户端多花一些心思。

延伸阅读：

二、外关键字约束是什么

外关键字约束定义了表之间的关系。当一个表中的一个列或多个列的组合和其它表中的主关键字定义相同时，就可以将这些列或列的组合定义为外关键字，并设定它适合哪个表中哪些列相关联。这样，当在定义主关键字约束的表中更新列值，时其它表中有与之相关联的外关键字约束的表中的外关键字列也将被相应地做相同的更新。外关键字约束的作用还体现在，当向含有外关键字的表插入数据时，如果与之相关联的表的列中无与插入的外关键字列值相同的值时，系统会拒绝插入数据。与主关键字相同，不能使用一个定义为 TEXT 或IMAGE 数据类型的列创建外关键字。外关键字非常多由16 个列组成。

指定在删除表中数据时，对关联表所做的相关操作。在子表中有数据行与父表中的对应数据行相关联的情况下，如果指定了值CASCADE，则在删除父表数据行时会将子表中对应的数据行删除；如果指定的是NO ACTION，则SQL Server 会产生一个错误，并将父表中的删除操作回滚。NO ACTION 是缺省值。

ON UPDATE {CASCADE | NO ACTION}

指定在更新表中数据时，对关联表所做的相关操作。在子表中有数据行与父表中的对应数据行相关联的情况下，如果指定了值CASCADE，则在更新父表数据行时会将子表中对应的数据行更新；如果指定的是NO ACTION，则SQL Server 会产生一个错误，并将父表中的更新操作回滚。NO ACTION 是缺省值。

NOT FOR REPLICATION

指定列的外关键字约束在把从其它表中复制的数据插入到表中时不发生作用。