網站怎麼自適應手機_如何讓網站自適應手機

① 怎麼把一個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選擇載入。祝你好運！

② 怎麼讓自己的網頁自己適應手機屏幕

打開你需要製作手機網頁的html或者php等等網頁源碼文件。在<head></head>之間加入meta標簽。
2
向瀏覽器聲明該網頁為移動設備自適應網頁的meta標簽為：
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
3
將以上標簽加入之後保存，再用手機打開即是自適應網頁了。

③ 如何讓網站自適應手機

關於網站如何做到自適應網頁，可根據如下操作：
首先，在網頁代碼的頭部，加入一行viewport元標簽。<metaname=」viewport」content=」width=device-width, initial-scale=1″ />viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度(width=device-width)，原始縮放比例(initial-scale=1)為1.0，即網頁初始大小占屏幕面積的100%。
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
「流動布局」的含義是，各個區塊的位置都是浮動的，不是固定不變的。float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow(溢出)，避免了水平滾動條的出現。
「自適應網頁設計」的核心，就是CSS3引入的Media Query模塊。它的意思就是，自動探測屏幕寬度，然後載入相應的CSS文件。同一個CSS文件中，也可以根據不同的屏幕解析度，選擇應用不同的CSS規則。
其次，除了布局和文本，」自適應網頁設計」還必須實現圖片的自動縮放。有條件的話，最好還是根據不同大小的屏幕，載入不同解析度的圖片。有很多方法可以做到這一條，伺服器端和客戶端都可以實現。

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

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

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

⑤ 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如何讓網站適應手機屏幕

並不是加了meta標簽，網站就會自適應手機屏幕了，還需要更改一些樣式。

你圖片上顯示搜索框的寬度是568px，但是頁面的寬度只有375（iPhone X的頁面顯示寬度），所以肯定會超出去，發生顯示不全的情況

這種情況你可以使用media標簽來做自適應

@mediaonlyscreenand(max-width:400px){
.search{width:300px}
}

上面代碼的意思是當頁面寬度小於400px的時候就讓.search的寬度變成300px。你可以吧上面的代碼加到你的css裡面看一下效果

導航:首頁 > 文件教程 > 網站怎麼自適應手機

網站怎麼自適應手機

與網站怎麼自適應手機相關的資料

友情鏈接