手機網站適配怎麼弄

❶ 怎麼把一個pc頁面自適應手機屏幕，自適應手機屏幕網站怎麼做嗎

無論是電腦還是手機，要做到自適應屏幕，其實都是一樣的。

首先，在網頁代碼的頭部，加入一行viewport標簽

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>

viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的判旁100%。即讓viewport的寬度等於物理設備正則上的真實解析度，不允許用戶縮放。

其次：網頁寬度css一定要使用百分比width:xx%;，不能用絕對像素。當然可以用width:auto;

第三，流動布局

.left{

float:left;

width:***%;

}

第四，選擇載入css

這是自適應的關鍵部分

.abc{height:300px;border:1pxsolid000;margin:0auto}

@mediascreenand(min-width:1201px){

.abc{width:1200px}

}

/*設置了瀏覽器寬度不小於1201px時abc顯示1200px寬度*/

@mediascreenand(max-width:1200px){

.abc{width:900px}

}

/*設置了瀏覽器寬度不大於1200px時abc顯示900px寬度*/

@mediascreenand(max-width:901px){

.abc{width:200px;}

}

/*設置了瀏覽器寬度不大於901px時abc顯示200px寬度*/

@mediascreenand(max-width:500px){

.abc{width:100px;}

}

/*設置了瀏覽器寬度不大於500px時abc顯示100px寬度*/

需要注意是CSS代碼順序，由大到小排版CSS（判斷瀏覽器寬度越大越放前），這樣是因為邏輯關系，@media判斷CSS排錯將導致判斷失效。

第四，圖片自適應

img{max-width:100%;}

老版本的IE不支持max-width，所以只好寫成：img{width:100%;}

篳五、採用相對字體大小

字體也不舉沖棚能使用絕對大小（px），而只能使用相對大小（em）。

這里最重要的，是第三條和第四條，也就是採用流動布局和css選擇載入。祝你好運！

❷ 做個手機頁面怎麼才能適配不同的手機

一般來說，笑絕iH5的手機案例默認的尺寸是640*1040px，也就是iPhone6 plus的尺寸，我用的正是iPhone6 plus，所以我做案例時沒出現碰殲姿過這類問題改叢，而你遇到案例呈現不完整的情況我想應該是手機型號的不同導致的。
你可以設置舞台或者設備的屬性，舞台裁剪為no，如果用的是短款手機觀看作品，有滾動條也可以看到完整的案例。
如果你想要實現完美適配，可以做三個設備，寬度均為640，高度可設置為1040（iPhone6 plus）、1008（iPhone5s和大部分Android手機）、832（iPhone4s）。
希望我的回答對你有幫助

❸ 移動端手機網站優化怎麼做

1、URL適配關系如果你的網站是自動響應式的，那可以忽略這一點，如果你的PC站和移動站URL可以對應，請把對應的規則寫到網路站長平台去，對應的方法有兩種，一種是寫規則，依葫蘆畫瓢，第二種是直接把移動和PC的URL整理出來，寫成一個txt的文件，上傳到網路去，讓他自己去識別

2、移動網站打開速度在移動網站上打開速度遠比PC站點重要，比較電腦的速度目前來講歲掘還是比手機要快，最低標准要保持網站在3秒鍾內打開，所以移動網站上勁量保持文字即可，不要搞的稀里嘩啦的，這不比PC網站，這一點自動相應的網站優化起來稍微困難一點，可以試著將PC和移動站一起優化

3、圖片延遲載入看到不少的自媒體APP上大多數都使用了圖片延遲載入的技術，當然還包括淘寶、京東等大型電商網站都使用到了，如果在移動網站上沒有特別的要求，盡量不要使用圖片，當然為了讓文字活起來，增加圖片也是應該的，那就使用圖片延遲載入的技術，既不影響網站的打開速度，又不會讓用戶覺得無圖無真相了

4、自動網站文字大小在PC網站上並沒有明確的說明要求網站文字大小，但是因為文字太游稿小並且文字上分有鏈接，有可能會被搜索引擎認為這是故意做的隱藏鏈接，移動搜索引擎上，千萬要注意文字的大小問題

網路官方的建議是：正文字型大小推薦14px，行間距推薦（0

42~0

6）*字型大小

5、網站實用性在移動網站上，網路最喜歡的是文字形式的網站，網路最不喜歡的是flash網站，所以盡量避免實用flash形式展現，另外視頻音樂網站應當是直接播放，嚴禁神雀孝欺騙用戶下載播放器（這屬於作弊行為），APP下載類的最佳體驗是直接下載，而不是跳轉多個頁面後才可以下載，至於移動網站的文檔類的，應當直接轉成文字發布出來

❹ 網頁通過什麼技術可以適配手機端

1、通過移動適配技術可以實現適配手機端，通過底層的web技術開發手段來完成；

2、允許網頁寬度自動調整。在網衡擾頁代碼的頭部，加入一行viewport元標簽，viewport是網頁默認的寬度和高度；

3、不使用絕對寬度。由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布咐核旦局，也不能使用具有絕對寬度的元素；

4、氏廳相對大小的字體。字體也不能使用絕對大小，只能使用相對大小；

5、流動布局。各個區塊的位置是浮動的，不是固定不變的。

❺ 怎麼修改網站的css讓它適應手機端

需要准備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

❻ 手機網站不兼容怎麼辦

把核心放在主要內容上，盡量讓網頁盡可能的簡約。不要運用過多的元素、內容設計不能過雜，確保不會彼此影響。倘若沒有利於客戶體驗的手機端網頁，可以用搜索引擎的轉碼技術，倘若有歸屬於自己的手機站，那要屏蔽轉碼技術。然而讓手機與平板等移動終端可以訪問網站相當重要，然而一個不可忽略的事實是，現在有太多的網站兼容存在問題。很多網站在某種內核下可以正常瀏覽，然而使用不同的瀏覽器就會產生錯位，或者一些代碼不能正常執行等。要知道在手機端訪問網頁，不僅跨越了瀏覽器並且是不同的系統平台，因此對網站的兼容是不小的挑戰。處理好每個細節問題，確保手機端製作的網頁能夠在不同的移動設備上正常運行。
手機屏幕不如pc端空間大，簡單出現內容不全，務必思考到兼容於多種瀏覽器。設計移動網站大小時，以滑動屏幕的方式來閱覽頁面，比不斷放大方便得多。響應式是做一個網站可以在不同解析度的設備上兼容，在電腦上看是電腦排版站，在手機上看就是手機站，適合於內容和框架比較規范的布局。手機跟電腦不同，每次打開頁面，都是要耗費流量，倘若網站打開太慢，客戶的反應就是關掉，無論網站做的怎樣精緻，用戶不會逗留。手機端網頁可以為客戶提供信息閱覽，也能協助公司和進行宣傳。具有無法比擬的優勢。

❼ 網站SEO優化中如何做好移動端的網站適配工作

1.網站升級為HTTPS，目前主流的搜索引擎都支持HTTPS並且在權重，排名上都會向前。

2.網頁前段的自適應，通過CSS以及JS來根據瀏覽器自動調整。

3.伺服器自適應輸出亂爛頁面，如果是移動端則使用HTML5模板，如果是PC端則使用web模板。

4.網路站長工具添加移動適早滾配陸陪余。

❽ 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;

}

❾ CSS如何讓網站適應手機屏幕

需要加一句

<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

然而這只是適應手高寬機的前提條件，它告神念畝訴手機適配游森，這是一個響應式網站，然後需要寫css去重置樣式，這個需要專業的前端知識。

或者參考步驟一步步嘗試

網頁鏈接