一、PC端網(wǎng)站,手機版網(wǎng)站,APP,三者可以實現(xiàn)共用同一數(shù)據(jù)庫同步更新
一般網(wǎng)站實現(xiàn)pc端與移動端適配的需求,方案有兩個:
1、一套頁面,從設(shè)計時就考慮到跨設(shè)備適配,響應(yīng)式的一步到位;
2、開發(fā)兩套頁面,根據(jù)設(shè)備尺寸加載加載不同的資源,目前已經(jīng)不常見了;
響應(yīng)式方案
做一個響應(yīng)式的頁面。即只用一個鏈接,用媒體查詢來控制樣式。同一個鏈接pc和移動端打開都可以適配,有的模塊是用兩套不一樣的css樣式。
最近做了一個匹配平板和手機的頁面,我用的媒體查詢是768px。因為ipad的尺寸是1366*768
當設(shè)備寬度最大是768時說明該設(shè)備是手機或者是平板的豎屏,用一套樣式;如果設(shè)備寬度最小是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;
??? }
}
如果要用響應(yīng)式的效果,較好從UI設(shè)計時就考慮到適配問題。設(shè)置寬度時,注意盡量用比率代替具體的數(shù)字。多測試頁面在不同分辨率下的寬度展示效果。
比如網(wǎng)頁的內(nèi)容寬度其實是1100px,兩邊就做留白處理。不管用戶的電腦有多寬,我們展示完1100px寬度的網(wǎng)頁后,讓網(wǎng)頁居中,剩下的寬度平分在兩邊即可。這樣我們能保證網(wǎng)頁內(nèi)的各個空間寬度比例在較好的范圍內(nèi)。
以前很多設(shè)計網(wǎng)頁內(nèi)容的寬度是鋪滿整個屏幕的,在現(xiàn)在的帶魚屏上就會把網(wǎng)頁拉伸的非常難看。
做兩套頁面的方案
對外宣傳用同一個鏈接,但是該鏈接在移動端與pc端打開,會分別自動跳轉(zhuǎn)到兩個不同的詳細的鏈接。
js判斷是pc或移動端核心代碼如下:
?? 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/’);
?? }
響應(yīng)式案例
1:個人博客用戶端
下面的博客是我自己開發(fā)的,我不懂UI設(shè)計,頁面都是自己憑感覺拼湊出來的。我的想法是移動端屏幕較小,能展示的內(nèi)容有限。移動端需要突出重點,放棄一些輔助功能。
2:管理后臺
對于管理后臺的移動端適配,我覺得主要在菜單這塊。PC端管理后臺一般都是側(cè)邊導航欄,移動端當然是放不下的,所以為了響應(yīng)式展示,頁面的整個架構(gòu)要注意調(diào)整。
其余依舊是對某些非必要的功能做刪除與合并,比如我刪掉了幾個入口,也把切換賬號功能有獨立的位置區(qū)域合并到菜單里。對于管理后臺的響應(yīng)式開發(fā),是會比用戶端多花一些心思。
延伸閱讀:
二、外關(guān)鍵字約束是什么
外關(guān)鍵字約束定義了表之間的關(guān)系。當一個表中的一個列或多個列的組合和其它表中的主關(guān)鍵字定義相同時,就可以將這些列或列的組合定義為外關(guān)鍵字,并設(shè)定它適合哪個表中哪些列相關(guān)聯(lián)。這樣,當在定義主關(guān)鍵字約束的表中更新列值,時其它表中有與之相關(guān)聯(lián)的外關(guān)鍵字約束的表中的外關(guān)鍵字列也將被相應(yīng)地做相同的更新。外關(guān)鍵字約束的作用還體現(xiàn)在,當向含有外關(guān)鍵字的表插入數(shù)據(jù)時,如果與之相關(guān)聯(lián)的表的列中無與插入的外關(guān)鍵字列值相同的值時,系統(tǒng)會拒絕插入數(shù)據(jù)。與主關(guān)鍵字相同,不能使用一個定義為 TEXT 或IMAGE 數(shù)據(jù)類型的列創(chuàng)建外關(guān)鍵字。外關(guān)鍵字非常多由16 個列組成。
指定在刪除表中數(shù)據(jù)時,對關(guān)聯(lián)表所做的相關(guān)操作。在子表中有數(shù)據(jù)行與父表中的對應(yīng)數(shù)據(jù)行相關(guān)聯(lián)的情況下,如果指定了值CASCADE,則在刪除父表數(shù)據(jù)行時會將子表中對應(yīng)的數(shù)據(jù)行刪除;如果指定的是NO ACTION,則SQL Server 會產(chǎn)生一個錯誤,并將父表中的刪除操作回滾。NO ACTION 是缺省值。
ON UPDATE {CASCADE | NO ACTION}
指定在更新表中數(shù)據(jù)時,對關(guān)聯(lián)表所做的相關(guān)操作。在子表中有數(shù)據(jù)行與父表中的對應(yīng)數(shù)據(jù)行相關(guān)聯(lián)的情況下,如果指定了值CASCADE,則在更新父表數(shù)據(jù)行時會將子表中對應(yīng)的數(shù)據(jù)行更新;如果指定的是NO ACTION,則SQL Server 會產(chǎn)生一個錯誤,并將父表中的更新操作回滾。NO ACTION 是缺省值。
NOT FOR REPLICATION
指定列的外關(guān)鍵字約束在把從其它表中復(fù)制的數(shù)據(jù)插入到表中時不發(fā)生作用。