1. pc 網站有了，怎麼做手機適應的網站
一、PC網站自動適配手機網頁的7個步驟
一般來說，移動適配主要通過底層的web技術開發手段來完成，下面馬海祥將通過移動適配技術的角度來告訴你通過7個步驟來完成一個PC網站向移動設備的跳躍！
1、允許網頁寬度自動調整
「自適應網頁設計」到底是怎麼做到的？其實並不難。
首先，在網頁代碼的頭部，加入一行viewport元標簽，viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置，包括IE9，對於那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
2、不使用絕對寬度
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素，這一條非常重要。
具體說，CSS代碼不能指定像素寬度：width:xxxpx;
只能指定百分比寬度：width:xx%;或者width:auto;
3、相對大小的字體
字體也不能使用絕對大小（px），而只能使用相對大小（em）。
body{
font:normal100%Helvetica,Arial,sans-serif;
}
上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。
h1{
font-size:1.5em;
}
然後，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。
small{
font-size:0.875em;
}
small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。
4、流動布局（fluidgrid）
「流動布局」的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.main{
float:right;
width:70%;
}
.leftBar{
float:left;
width:25%;
}
float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。
另外，絕對定位（position:absolute）的使用，也要非常小心。
5、選擇載入CSS
「自適應網頁設計」的核心就是CSS3引入的MediaQuery模塊，它的意思就是，自動探測屏幕寬度，然後載入相應的CSS文件。
media=」screenand(max-device-width:400px)」
href=」tinyScreen.css」/>
上面的代碼意思是，如果屏幕寬度小於400像素（max-device-width:400px），就載入tinyScreen.css文件。
media=」screenand(min-width:400px)and(max-device-width:600px)」
href=」smallScreen.css」/>
如果屏幕寬度在400像素到600像素之間，則載入smallScreen.css文件。
除了用html標簽載入CSS文件，還可以在現有CSS文件中載入。
6、CSS的@media規則
同一個CSS文件中，也可以根據不同的屏幕解析度，選擇應用不同的CSS規則。
@mediascreenand(max-device-width:400px){
.column{
float:none;
width:auto;
}
#sidebar{
display:none;
}
}
上面的代碼意思是，如果屏幕寬度小於400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。
7、圖片的自適應（fluidimage）
除了布局和文本，自適應網頁設計還必須實現圖片的自動縮放。
這只要一行CSS代碼：
img{max-width:100%;}
這行代碼對於大多數嵌入網頁的視頻也有效，所以可以寫成：
img,object{max-width:100%;}
老版本的IE不支持max-width，所以只好寫成：
img{width:100%;}
此外，windows平台縮放圖片時，可能出現圖像失真現象。這時，可以嘗試使用IE的專有命令：
img{-ms-interpolation-mode:bicubic;}
或者，EthanMarcotte的imgSizer.js。
addLoadEvent(function(){
varimgs=document.getElementById(「content」).getElementsByTagName(「img」);
imgSizer.collate(imgs);
});
最好還是做適配解析度的圖片，有很多方法可以做到同樣效果，伺服器端和客戶端都可以實現（具體可查看馬海祥博客《根據訪問設備自動識別展示手機站或PC站的方法》的相關介紹）。
二、適配最常見的操作方法
據馬海祥觀察，PC站和手機站匹配最常用的幾種方法是移動適配、JS跳轉、Meta聲明、302規則等等，由於每種方法的操作方式不同，產生的效果也不同，具體的優缺點也需要區別對待，在此，馬海祥就給大家比較一下這4種適配方法的優缺點以及需要注意的地方：
1、移動適配
現在很多搜索引擎都提供移動適配的功能，例如網路的開放適配和360的移動適配，利用網路站長工具提交PC頁-手機頁對應關系Sitemap，或者利用360站長工具提交PC頁-手機頁對應關系txt就能實現PC站內容和手機站一一適配。
這樣做的優點是只需要在搜索引擎工具提交資料，無需對站點本事做改動，而且網站內容一一對應，並不只局限於網站首頁。
缺點就是只能在網路或者360移動搜索中生效，其他沒用提交適配文件的搜索中就無效了。
2、JS跳轉
JS跳轉對於某些行業來說有著重要的作用，尤其是對於用戶轉換率網站首頁較高的網站，只需要在網站的頭部加一段JS代碼判定是否是移動端訪問，然後所有的流量就會全部流向手機站的主頁。
JS跳轉的優點是適用於所以的移動搜索，並不局限於網路和360，可以提高用戶的轉換率。
缺點是難以實現每個頁面的一一對應，而且容易被某些搜索引擎判定作弊，從而受到懲罰。
3、Meta聲明
Meta聲明的格式一般為，站長可以將這段代碼加在PC站的頭部，由Meta信息來指明該PC頁對應的手機頁的URL，以及該URL對應頁面的格式。
Meta聲明的優點是代碼簡單易懂，操作方便。
缺點是只能在網路移動搜索中生效，對於其他搜索引擎無效（另外，還可以使用網路轉碼，具體可查看馬海祥博客《網路轉碼後的手機網站頁面是否有利於SEO優化》的相關介紹）。
4、302規則
302規則指的是，當判定移動端訪問網站時，302臨時跳轉到一個網址(手機站)，例如可以在htaccess文件里加上一段判定手機的代碼，做個302重定向。
這樣做的好處是，不需要再額外在網站的前端代碼中加任何東西，也不需要向搜索引擎提交規則，可是據測試，有可能會導致PC站被降權。
雖然302是暫時性的重定向，但過於頻繁的302是很有可能給網站帶來不利的影響的，具體的尺度需要站長自己去把握。
以上4種適配方法是接觸的最為常見的操作方法，通常PC站做了以上處理後，一段時間以後移動端搜索出來的結果，下面匹配的網址就變成了移動站網址，不過標題還是PC站標題。
至於到底哪種方法更好，更傾向於第一種，畢竟網路移動搜索占據著網站的大部分流量，而且用戶體驗度也最好。
2. HTML網頁如何完美的適配到移動設備上
1、在已安裝的電腦桌面新建一個Word文檔（演示文稿以Office2007系列為主），然後打開新建的文檔，輸入文字。
3. 如何讓一個網站同時適配PC和移動設備
要讓一個網站同時適配pc和移動端，那你得會寫前端，html,css，js用得好就行，一個個屏幕調好，如果不會的話，前端裡面有學的，花時間學就可以了
4. 怎麼修改網站的css讓它適應手機端
需要准備的材料分別有：電腦、瀏覽器、html編輯器。
1、首先，打開html編輯器，新建html文件，例如：index.html。
5. 怎樣低成本的實現網頁在移動端的適配
解決方案涉及到的知識點：
viewport
media query
Javascript window.matchMedia
響應式圖片
柵格布局
頂部導航
測試工具
iOS和Android自帶的瀏覽器都是基於webkit內核，所以我們可以使用viewport屬性和media query技術實現網站的響應性。
viewport
在<head>之中添加viewport元數據標簽。
width=device-width 實現屏幕適配，頁面繪制根據觸屏大小變化，保持一致。
initial-scale 表示初始縮放。
Js代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0">
maximum-scale 表示最大縮放比例，1意味著不能進行縮放。
user-scalable=no 禁用頁面縮放（zooming）功能。禁用縮放後，用戶只能滾動屏幕，讓你的網站看上去更像原生應用。
注意，這種方式我們並不推薦所有網站使用，還是要看你自己的情況而定！
Js代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
media query
根據不同的解析度，引用不用的css
Css代碼
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />
Bootstrap3的實現 http://v3.bootcss.com/css/#grid-media-queries ，
以下是LESS方法的實現
Js代碼
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Javascript window.matchMedia
用CSS3解決的確很方便，但某些場景下仍然需要JS技術。
Js代碼
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}
狀態改變時監聽
Js代碼
function setup_for_width(mql) {
if (mql.matches) {
// The screen width is 400px or wider. Set up or change things
// appropriately.
} else {
// The screen width is less than 400px. Set up or change things
// appropriately.
}
}
var width_mql = window.matchMedia("(min-width: 400px)");
// Add a listener for when the result changes
width_mql.addListener(setup_for_width);
// And share the same code to set things up with our current state.
setup_for_width(width_mql);
6. 移動端手機網站優化怎麼做
簡單是主要因素。與個人電腦網站相比，大多數移動網站的內容不到個人電腦網站的一半，甚至更少。一般來說，移動網站的瀏覽速度比個人電腦網站慢，而且網頁過於復雜，這會消耗客戶的耐心。特別是，導航欄應該簡短，可以快速引導用戶訪問網站信息。就網站內容而言，越簡單越好，排版應該是指信息網站，甚至以廣告為信息，都是圍繞網站的主題設計的。大多數需要單獨優化的企業網站都以雙網融合的形式存在，即pc和手機同步更新。pc優化驅動手機是一個錯誤的理解。因此，在手機網站優化中，有必要保持導航的使用，不要拘泥於某些設計體驗，要更加註重客戶體驗。
有限的手機屏幕需要我們去衡量的，不像電腦站。因此，在手機網站優化內容的建設中，應該盡可能減少佔用的內存，文字應該盡可能簡單，圖片應該盡可能少的使用，這樣用戶一進入網站就可以看到自己想要的東西，而不需要做pc站的深度。分頁的思想應該簡潔。主頁加上內容頁面的主要標準是主要結構。主頁還可以添加列表和內容頁面，這有利於用戶操作。
為了在移動端獲得排名，手機網站優化應該注重seo優化的基礎，營銷網站的相關思考，移動網站也很重要。現在許多移動網站與個人電腦分離，這不利於管理和客戶體驗。眾所周知，網站運行在電腦上，甚至筆記本電腦，大約10英寸長。大屏幕決定了網站可以添加很多華麗的效果和多媒體內容。隨著硬體的發展和互聯網的加速，基本上所有的pc機硬體都能快速打開大多數網站。
7. 網站移動適配怎麼寫啊
這的意思是 一般開發會分成 pc 端 和 移動端 ，為的是 頁面適配，
比如說 網路 PC的 是 www..com 換成 手機的 m..com 。只是訪問後表現形式不一樣 ，如果說你只有一種 那就 都添 一樣的就可以了
8. 不是自適應網站需要做移動適配嗎模板里有個m文件，是否需要專門做個m的二級網站去專門做移動端呢
如果移動客戶較多，應該進行移動端適配。
至於如何做自適應或是否使用二級網站，這取經你的自己（改造難度）。
建議把網站修改成自適應的就可以了，只需要一個網站就行（減少後期維護成本）。
9. 網站移動端怎麼做
網站移動端製作原理：
1：域名解析一個m.xxx.com，綁定到伺服器上
2：m.xxx.com放PC端的網站程序，資料庫直接連接PC資料庫
3：移動模板對應PC模板，程序文件和pc一樣。只是資料庫是共用一個
4：在PC頁面上面設置移動跳轉判斷，網上有PHP跳轉代碼，
5：你可以參考開源程序製作移動端，比如dedecms，帝國cms製作移動端，如果感覺比較麻煩了，那就直接把PC頁面重寫，頁面直接修改成響應式！