『壹』 移動端網站製作的有哪些要求
要遵循的規則就是盡量保持整潔，不要顯得過於雜亂，由於亂糟糟網站會影響到客戶的注意力，在手機網站界面，在保持原有的風格的基礎上，盡可能的布局合理。因為手機網站客戶是由上往下看，因而在製作網站中應該是重要的信息往前放，次要的內容瞎並往後放的規則，這樣可以讓用戶獲取重要的信息，降低網站高跳出率的出現。
公司在為自己的網站選擇設計方式時要根據企業的實際情況和目標來選擇，一定要選擇適用公司自己的頁面設計方案。不過對於大部分的中小型企業來說，響應式網站製作既能節約手機網站營運費用，又可為潛在用戶提供友好的網站體驗。
在建造手機網站的內容時，篩選上要精挑細選。在網站上展現企業的中心產品而不是可有可無的東西。通常來說，客戶在移動端打開公司的手機網站是有目的的，棚喊很有可能是希望在網站中能夠明白到產品的單價以及其他的參數等。企業應該在網站上展現這類信息。手機網站能夠實現與頁面同樣的作用，可以及時的提供公司的商品信息。
只要將資料存放在手機網站上，就能夠隨時隨地進行信息的更新，降低了宣傳和運營的費用，一定程度上講便是減少企業費用的支出。因為網站的導航欄在移動端的顯示有局限，因此手機製作網站時，導航欄應該要遵循極簡規則，盡量將核心內容濃縮為導航，使客戶看起來通俗易懂。
總而言之，格子網路覺得手磨和跡機網站的製作不是盲然的，更不復雜，公司打造一個容易漂亮的手機網站不僅能夠為用戶帶來好的體驗，也將是企業發展有效的方法渠道之一。盡管手機網站開發要比傳統網站容易，然而仍舊要對兩個網站進行相同元素的匹配。在其手機網站開發和傳統網站都採用了同樣色系和圖標。
『貳』 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;
}
『叄』 手機網站建站有哪些需要注意的
手機建站中最需要注意的就是整體的響應式布局，因為手機的屏幕大小是不同的，有些手機屏幕大，有些手機屏幕小，如何讓網站能夠在不同的屏幕之間完美的進行顯示，這個是每個人都需要考慮的。
『肆』 dw手機網站怎麼布局
和pc端的網頁差不多，網頁大小控制在640px左右。也可以設置為100%，按比例來做。這樣能手機整屏顯示。
<metaname="viewport"巧絕content="width=device-width,initial-scale=1"/>
添加這個代碼，表示網頁不能放大，按1：1顯示。孝含姿不會因為放大顯示而，導致網頁錯位。注意字體大小要稍微大一老態點。
『伍』 如何設計手機網站
現在人人都離不開手機，手機功能從初的接打電話、收發簡訊到如今的智能網路服務，手機變成了一個移動的網路端，手機網站也成為了人們上網的重要聚到。那麼設計者應該如何設計手機網站？
1、網站結構和布局
用戶打開手機登錄網站，先看到的就是網頁的整體結構還有板塊分布。如何讓用戶喜歡並且有耐心繼續在你的網站看下去是一個關鍵。頁面應該整體布局合理，讓用戶看到時不會感到雜亂。試想一下，如果網頁排版混亂，各種新聞或者視頻等亂糟糟的混在一起，誰看到以後都不想繼續瀏覽，只想趕緊退出換別的網站。所以網站在結構上一定要清晰，讓人看到的時候一目瞭然，種類劃分明確，便於用戶按喜好查找內容。
2、網站內容有特色
用戶在瀏覽網站時，可能本身並沒有什麼計劃想要看什麼內容，或者只是習慣性的打開看一眼。這時網站應該把有創意有吸引力的內容做頭條，這樣用戶本來只是點進來看一眼，看到新奇的內容後，會忍不住的繼續瀏覽網站。
3、網站圖片的大小適宜
很多用戶在瀏覽網站時，如果網路速度不快，瀏覽圖片時會出圖比較慢或者直接無法顯示。網站設計者應該注意使上傳圖片者控制圖片大小，不要上傳太大的圖片，也不要上傳模糊和解析度很小的圖片，不然的話用戶可能會因為打不開圖片而關閉頁面
4、頁面不宜過大
設計者應注意網頁的頁面大小不要超過20KB，頁面如果太大會消耗用戶更多的流量。
5、注意屏幕規格
手機一般都可以用橫屏和豎屏兩種方式瀏覽網頁，設計者應注意橫向和縱向的區別設計兩種規格的尺寸。
『陸』 手機網站如何建設
pageadmin一樣很方便的製作手機網站：
一、在站點管理裡面新建一個手機分站，如下圖：
『柒』 如何讓網站自適應手機
一.允許網頁寬度自動調整："自適應網頁設計"到底是怎麼做到的？
其實並不難。首先，在網頁代碼的頭部，加入一行viewport元標簽。
<metaname="viewport"content="width=device-width,initial-scale=1"/>
二.不使用絕對寬度由於網頁會根據屏幕寬度調整激喚虧布局，所以不能使用絕對寬度的布局，也不鏈手能使用具有絕對寬度的元素。
三.相對大小的字體字體也不能使用絕對大小（px），而只能使用相對大小（em）。
四.流動布局（fluidgrid）"流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.main{float:right;width:70%;}.leftBar{float:left;width:25%;}
五.圖片的自適應（fluidimage）除了布局和文本，"自適應網頁明神設計"還必須實現圖片的自動縮放。
六、此外，企業藉助建站寶盒搭建一個響應式網站就可以適應所有設備屏幕了，其中包括電腦、手機、Ipad等。
『捌』 如何做好手機網頁設計
隨著互聯網科技的發展以及人們生活方式的改變，手機網站逐漸趕上PC網站，成為企業宣傳推廣以及用戶閱讀的的主要平台，因此也有越來越多的企業開始製作手機網站。不過，手機網頁設計必須遵循移動端的設計原則，而不是盲目沿用電腦網站的設計規律，畢竟兩者還是有很大區別的。
首先，移動端網頁設計都需要考慮網路的問題。雖然現在的網路普及程度高，但是大部分用戶還是利用手機流量來上網的，因此對手機網頁的訪問載入速度要求較高。如果用戶在流量網頁時遇到頁面遲滯、視覺錯位、信息不全等問題，用戶體驗就會大打折扣，因此要求網頁內容盡量簡潔明了，同時展現精準、有用、易用的菜單欄。
還有，因為手機端屏幕大小不一，如果想要保證所有人正常訪問頁面，維持內容的可讀性，那麼就需要我們在進行相關設計的時候，盡量控制文本的間距、顏色，著重突出頁面的重點內容，讓用戶更容易看到自己想看到的內容,另外，一般手機中的電話、簡訊、推送等信息是無處不在的，用戶在瀏覽網站時，注意力很容易就被這些彈出來的信息所吸引，因此網頁的圖標設計一定要高效，讓用戶在短時間內就知道網頁的導航信息是什麼、主要內容是什麼，節省用戶時間的同時，還為網站爭取了成交的機會。
手機網站布局設計方法
1、手機網站的單頁
手機網站建設的單頁這個是存在於很多企業網站的內容，單頁優化有著一定的好處，首先網站的單頁是用HTML書寫，並且完全靜態化，這個是符合搜索引擎的，有利於優化，對搜索引擎友好。
這種頁面的布局往往需要的是大氣，簡潔，直入主題。一般可以用來介紹公司以及公司的主要核心內容。
2、首頁布局
手機網站建設的首頁是一個網站的核心部分，瀏覽者首先看到的就是首頁，然後才會看到內頁，才會了解你的公司，只有首頁有吸引力，才能留住瀏覽者瀏覽你網站的內容，那麼首頁的布局就很重要了。
首頁需要突出網站的核心，展示公司的優勢，盡顯企業的特色，而且需要有主次之分，上下之分，因為瀏覽者的習慣是從上而下，從左而右瀏覽的。
3、內容頁布局
手機網站建設的內容頁就是網站的內容詳細展示頁面了，有的網站建設者沒有太多注意的問題，手機網站建設者認為內容頁根本不重要或是不是很重要，只要在後台把文章內容上傳上去讓其顯示就可以了。
其實一些大網站的權重流量都是靠這些內容頁撐起來的，我們每天更新文章顯示的一個界面，這個頁面的一個好的內容頁能夠給網站帶來某一特定詞的排名。
4、列表頁布局
手機網站建設的列表頁分為圖片列表和文章列表頁。圖片列表頁一般展示的是公司的案例或產品，一般圖文布局展示就可以了。文章列表頁展示的是公司的新聞或行業動態之類的文章，一般是新聞標題顯示布局就可以了。
『玖』 最流行的四種移動端布局方式，看這一篇文章就夠了
眾所周知，pc端呢目前處於一種三家分晉，即三種內核（webkit，blink，gecko），當然算上馬上要更換內核的IE那就是四個。而我們的移動端呢，那就是萬余基於webkit了，所以各位進行移動端web開發時，只考慮webkit的適配就可純察以了，怎麼樣，開不開心 ？
我們先蠢褲悉來看看什麼是視口，視口就是瀏覽器顯示頁面內容的屏幕區域。 視口可以分為布局視口、視覺視口和理想視口，他又可以分成一下四種
一般移動設備的瀏覽器都默認設置了一個布局視口，用於解決早期的PC端帶乎頁面在手機上顯示的問題。
iOS, Android基本都將這個視口解析度設置為 980px，所以PC上的網頁大多都能在手機上呈現，只不過元素看上去很小，一般默認可以通過手動縮放網頁。
字面意思，它是用戶正在看到的網站的區域。注意：是網站的區域。
我們可以通過縮放去操作視覺視口，但不會影響布局視口，布局視口仍保持原來的寬度。
為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定
理想視口，對設備來講，是最理想的視口尺寸
需要手動添寫meta視口標簽通知瀏覽器操作
meta視口標簽的主要目的：布局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬，我們布局的視口就多寬
最標準的viewport設置
視口寬度和設備保持一致
視口的默認縮放比例1.0
不允許用戶自行縮放
最大允許的縮放比例1.0
最小允許的縮放比例1.0
ps：注意二倍圖或者三倍圖問題
流式布局，就是百分比布局，也稱非固定像素布局。
通過盒子的寬度設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充。
流式布局方式是移動web開發使用的比較常見的布局方式。
父盒子開啟display：flex後，默認為不換行，所以使用flex-wrap：wrap；使其換行
使用justify-content: space-around; 使其子盒子主軸間距平均分配
使用align-content: space-around; 使其子盒子側軸間距平均分配
方案1
①假設設計稿是750px
②假設我們把整個屏幕劃分為15等份（劃分標准不一可以是20份也可以是10等份）
③每一份作為html字體大小，這里就是50px
④那麼在320px設備的時候，字體大小為320/15就是 21.33px
⑤用我們頁面元素的大小除以不同的 html字體大小會發現他們比例還是相同的
⑥比如我們以750為標准設計稿
⑦一個100 100像素的頁面元素在 750屏幕下， 就是 100/ 50 轉換為rem 是 2rem 2rem 比例是1比1
⑧320屏幕下， html字體大小為21.33 則 2rem= 42.66px 此時寬和高都是 42.66 但是寬和高的比例還是 1比1
⑨但是已經能實現不同屏幕下 頁面元素盒子等比例縮放的效果
總結：
①最後的公式：頁面元素的rem值 = 頁面元素值（px） / （屏幕寬度 / 劃分的份數）
②屏幕寬度/劃分的份數就是 htmlfont-size 的大小
③或者：頁面元素的rem值 = 頁面元素值（px） / html font-size 字體大小
方案2
1.less+rem+媒體查詢
2.lflexible.js+rem
響應式需要一個父級做為布局容器，來配合子級元素來實現變化效果。
原理就是在不同屏幕下，通過媒體查詢來改變這個布局容器的大小，再改變裡面子元素的排列方式和大小，從而實現不同屏幕下，看到不同的頁面布局和樣式變化。
父容器版心的尺寸劃分
超小屏幕（手機，小於 768px）：設置寬度為 100%
小屏幕（平板，大於等於 768px）：設置寬度為 750px
中等屏幕（桌面顯示器，大於等於 992px）：寬度設置為 970px
大屏幕（大桌面顯示器，大於等於 1200px）：寬度設置為 1170px
但是我們也可以根據實際情況自己定義劃分
直接拿Bootstrap 預先定義好的樣式來使用
修改Bootstrap 原來的樣式，注意權重問題
學好Bootstrap 的關鍵在於知道它定義了哪些樣式，以及這些樣式能實現什麼樣的效果