一頁面，根據訪問的是pc端還是移動端來展示對應的樣式。以下提供兩種方法：
1.利用js判斷設備類型，應用不同樣式文件
$(function(){
var browser={
versions:function(){
var u=navigator.userAgent, app=navigator.appVersion;
//移動設備瀏覽器版本信息
return {
//IE內核
trident: u.indexOf('Trident') > -1,
//opera內核
presto: u.indexOf('Presto') > -1,
//蘋果、谷歌內核
webKit: u.indexOf('AppleWebKit') > -1,
//火狐內核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML')==-1,
//是否為移動終端
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
//ios終端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
//android終端或者uc瀏覽器
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
//是否為iPhone或者QQHD瀏覽器
iPhone: u.indexOf('iPhone') > -1 ,
//是否iPad
iPad: u.indexOf('iPad') > -1,
//是否web應該程序，沒有頭部與底部
webApp: u.indexOf('Safari')==-1
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
if(browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad){
cssChange();
}
function cssChange(){
var link=document.getElementsByTagName('link')[0];
//PC端應用的樣式文件：pc.css
//alert('當前應用樣式文件是：'+link.getAttribute('href'));
link.setAttribute('href','css/mobile.css');
//Mobile端應用樣式文件：mobile.css
//alert('當前應用樣式文件是：'+link.getAttribute('href'));
}
})
2.利用css3的媒體查詢，在不同的分辨率下，調用不同的css文件
<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<title>用媒體查詢做自適應頁面</title>
<!--添加視口-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 320px) and (max-width:480px)">
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 480px) and (max-width:600px)">
<link rel="stylesheet" type="text/css" href="styleC.css" media="screen and (min-width: 600px) and (max-width:800px)">
<link rel="stylesheet" type="text/css" href="styleD.css" media="screen and (min-width: 800px)">
<!--
創建4個css文件，
styleA.css 中樣式為// .div_1{width:320px;border:1px solid red}
styleB.css 中樣式為// .div_1{width:480px;border:1px solid blue}
styleC.css 中樣式為// .div_1{width:600px;border:1px solid pink}
styleD.css 中樣式為// .div_1{width:800px;border:1px solid black}
-->
</head>
<body>
<div class="div_1">
我是Body下的第一個Div元素
</div>
<!--
當屏幕寬度介于 320px 與 480px 之間時 div元素寬度為320px,邊框為紅色
當屏幕寬度介于 480px 與 600px 之間時 div元素寬度為480px,邊框為藍色
當屏幕寬度介于 600px 與 800px 之間時 div元素寬度為600px,邊框為粉色
當屏幕寬度大于 800px時 div元素寬度為800px,邊框為黑色
-->
</body>
</html>
類對于新名詞的認識總是有一種無形的障礙感，但是我們在成長的過程中總是在不斷的認識新的名詞，可能一部分新名詞是隨著時間推移自然而然的接收并認知，也有一部分是我們學習過程中不得不去認真去學習，去認知的名詞，就像高中我們需要認識什么是映射？什么是函數？
但是今天要介紹的是作為一個從來不玩游戲的人來說，在而立之年還需要重新認識什么是手游？什么是端游？
說起手游，什么是手游呢？顧名思義就是可以在手機及平板電腦等移動終端上玩的游戲。現在的手機的功能越來越多，越來越強大，當然手機的價格也不便宜，從低價位到高價位都有。從最開始的手機上面可以玩的俄羅斯方塊、貪吃蛇等畫面撿漏，規則簡單的游戲，進而發展到了可以和掌上游戲機媲美，具有很強的娛樂性和交互性等復雜形態。所以，一個好的手機足夠滿足你所有路途中大部分的娛樂需求了。
目前最流行的手機游戲程序語言是Java。由于大多數的手機都內置了Java的運行環境，加上Java語言自身的跨平臺特性，Java成為了編寫手機游戲時最常使用的語言之一。用于在手機上運行的Java一般按照J2ME標準進行編程。
了解了手游，那么我們來看看頁游，網頁游戲又稱Web游戲，無端網游，簡稱頁游。是基于Web瀏覽器的網絡在線多人互動游戲，無需下載客戶端，不存在機器配置不夠的問題，最重要的是關閉或者切換極其方便，尤其適合上班族。
它不需要客戶端，比如戰爭策略類網頁游戲《鑄劍》就可直接通過網頁進行游戲，它采用Java網頁技術，在IE 瀏覽器上輸入游戲網址，不需下載客戶端，即可進行游戲。游戲擁有精美的畫面、龐大的戰爭系統和高級趣味性。玩家在游戲中扮演一名亂世中崛起的將領，逐步建設城池，提升科技，招募軍隊，并開拓新的城池和領地，成為一代天驕。
端游 ，是2012年相對于"頁游"所產生的新名詞，全稱是"客戶端游戲" ，即是傳統的依靠下載客戶端，在電腦上進行游戲的網絡游戲。
端游和頁游的對比:
畫面: 端游可以做到精細的畫面和特效，因客戶端電腦配置的高低可以調整顯示精細度，因此電腦配置越高，效果和畫面越好;而頁游卻只能進行簡單的精細度調節，以減少下載時間;
特效:主要指技能、場景、人物效果。毫無疑問，在傳統的端游上這一點會做的更好;
速度:1，下載速度: 頁游領先，在游戲加載過程中，頁游只需要加載需要部分的頁面，因此可以快速進入游戲 ，而端游需要在整個客戶端準備完畢后才可以進行游戲; 2，游戲速度: 主要取決于網絡情況。在網絡良好的情況下， 頁游延遲比較高，端游有比較大的優勢;因此頁游無法做像FPS類高反應靈敏度的游戲;
在專業的游戲玩家口中得知這樣的名詞，突然之間感覺很陌生，但是經過學習認知之后，是不是很簡單呢！歡迎大家在評論區交流學習。
、使用的平臺不一樣
PC端網站是在電腦上運行，而MC端網站網站是在手機上運行，對于兩者的制作方面，有很大的不同，手機網站不能太炫酷，不能使用太多圖片，不能有特效，只能簡化，直接展示出核心內容，如果花哨，影響用戶體驗，而PC端不同，任意設計。
二、操作系統不一樣
由于兩者之間的運行系統不一樣，側重點不一樣，現在PC端電腦更多偏向辦公，MC端網站更多偏向生活，對于兩者功能開發有些不一樣，相比手機支付等方面，更為完善、便捷、安全系數高，需要考慮用戶的實際需求，在進行開發制作，這樣用戶體驗好，更能方便用戶。
三、未來發展不一樣
目前使用手機上網的用戶越來越多，已經遠遠超過PC端，對于企業來說，有用戶就有市場，既然移動端這么多用戶群體，要想開發這渠道的用戶，那就需要挖掘用戶需求，做好宣傳平臺，隨著智能手機越來越強大，加上現在用戶越來越多，潛力將無法估量。
總之，MC端網站也就是手機網站，現在是非常火熱，很多企業從MC端的獲得業績，遠遠超過了PC端，面對這么大的市場，企業一定要重視，做好MC端網站建設，承接移動端的潛在客戶，為企業全網營銷做好鋪墊，還沒有手機網站的企業，請盡快開展，早開展，早超越競爭對手。