一、PC端網站，手機版網站，APP，三者可以實現共用同一數據庫同步更新

一般網站實現pc端與移動端適配的需求，方案有兩個：

1、一套頁面，從設計時就考慮到跨設備適配，響應式的一步到位；

2、開發兩套頁面，根據設備尺寸加載加載不同的資源，目前已經不常見了；

響應式方案

做一個響應式的頁面。即只用一個鏈接，用媒體查詢來控制樣式。同一個鏈接pc和移動端打開都可以適配，有的模塊是用兩套不一樣的css樣式。

最近做了一個匹配平板和手機的頁面，我用的媒體查詢是768px。因為ipad的尺寸是1366*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或移動端核心代碼如下：

響應式案例

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

指定列的外關鍵字約束在把從其它表中復制的數據插入到表中時不發生作用。