導航:首頁 > 網站知識 > 如何讓網站適應手機

如何讓網站適應手機

 發布時間：2022-03-08 08:58:20

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

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

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

② 怎麼讓網頁自動適應各個手機瀏覽器

1 . 第一種：

第一個想法是需要使用一個 css 背景圖，如果這張圖夠大，就能填充整個屏幕。當瀏覽器窗口大小沒有圖片大時，它將自動隱藏多餘的部分。
<head> .... <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("img.source-image").hide(); var $source = $("img.source-image").attr("src"); $('#page-body').css({ 'backgroundImage': 'url(' + $source +')', 'backgroundRepeat': 'no-repeat', 'backgroundPosition': 'top center' }); }); </script> </head> <body id="page-body"> <img class="source-image" src="images/image.jpg" alt="" /> </body>

上面的這些代碼能夠自動隱藏超出瀏覽器窗口部分的圖片(image.jpg)多餘部分，不會使瀏覽器產生滾動條。

2 . 第二種：

第一次試驗的效果並沒有達到要求，並不是真的使得背景圖片適應窗口大小，應該使用設置「寬度」和「高度」屬性來控制圖片的大小，如果我們能夠得到瀏覽器窗口顯示像素，就可以利用這個數字來控制圖片大小，同時保持比例。

使用 jquery 和 dimensions plugin 可以獲得這些參數。
<script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.dimensions.js"></script> <script type="text/javascript"> $(document).ready(function() { var $winwidth = $(window).width(); $("img.source-image").attr({ width: $winwidth }); $(window).bind("resize", function(){ var $winwidth = $(window).width(); $("img.source-image").attr({ width: $winwidth }); }); }); </script>

為了讓這張圖片更像一個背景圖像，我們設置：
img.source-image {position: absolute;top: 0;left: 0;}

因為背景圖片加上了定位代碼，那要加在背景圖片上任何東西都需要定位，如果您的背景圖像是豎條狀的（特別的高），而你的瀏覽窗口特別的寬，很容易造成背景圖片高度超過您的瀏覽器窗口的高度，為了防止這種情況，需要設定對超出的部分進行隱藏：
body {overflow: hidden;}

3 . 第三次方法（最好的）：

Stu Nicholls version給出了最好的方法(看了下網易的首頁也是這樣做的)，這處理方式不需要任何的 JavaScript 就能完美的達到目的。
#img.source-image {width: 100%;position: absolute;top: 0;left: 0;}

在 css 里直接設定背景圖片寬度的百分比，這是這個方法的效果。這個方法是最好的，而且不需要任何的 JavaScript 。

③ 網頁設計中，如何讓頁面自適應手機端

一般來說，通過CSS3，可以直接對不同解析度下的樣式進行定義，比如如下的代碼。
/* PC或中大型筆記本設備 desktop */ @media all and (min-width: 1201px) { .title-desktop{ display: block !important; } .container { width: 1100px; } } /* 中小型筆記本或大平板 laptop */ @media all and (min-width: 980px) and (max-width: 1200px) { .title-laptop{ display: block !important; } .container { width: 920px; } }
但是上面的方法，可能不會兼容老版本ie。
所以也可以通過js，識別當前頁面的解析度，來給出樣式，這種比較好也比較復雜，代碼量很多但是一般沒有兼容問題。

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

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

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

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

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

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

⑤ html如何適應手機

有幾種，利用meta標簽、百分比法、使用CSS3單位rem、媒體查詢。

⑥ HTML網頁如何自動適應手機屏幕

⑦ 做好了網頁，怎麼讓它自適應手機屏幕

⑧ 如何讓網站自適應手機

1.
首先要說下，就算你的導航自適應手機，而整站的代碼不適合手機，網站也無法像你想像的那種樣式在手機展示的。
2.
要嗎製作一個手機版的網站
3.
要嗎更換模板，現在有那種全站頁面自適應的html模板，您下載後自己修改為織夢網站模板也可以的了
夢客吧織夢模板

為您解答
望採納

⑨ 如何讓一個pc頁面自動適應手機屏幕

頁面自適應屏幕的方法（以下字母及標點為專業代碼）：

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

首先，在網頁代碼的頭部，加入一行viewport標簽<meta name="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的寬度等於物理設備上的真實解析度，不允許用戶縮放。

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

打開你需要製作手機網頁的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
將以上標簽加入之後保存，再用手機打開即是自適應網頁了。

閱讀全文

與如何讓網站適應手機相關的資料

熱點內容
網路共享中心沒有網卡 瀏覽：302
電腦無法檢測到網路代理 瀏覽：1200
筆記本電腦一天會用多少流量 瀏覽：317
蘋果電腦整機轉移新機 瀏覽：1211
突然無法連接工作網路 瀏覽：787
聯通網路怎麼設置才好 瀏覽：997
小區網路電腦怎麼連接路由器 瀏覽：750
p1108列印機網路共享 瀏覽：1015
怎麼調節台式電腦護眼 瀏覽：455
深圳天虹蘋果電腦 瀏覽：695
網路總是異常斷開 瀏覽：412
中級配置台式電腦 瀏覽：739
中國網路安全的戰士 瀏覽：416
同志網站在哪裡 瀏覽：1181
版觀看完整完結免費手機在線 瀏覽：1260
怎樣切換默認數據網路設置 瀏覽：909
肯德基無線網無法訪問網路 瀏覽：1058
光纖貓怎麼連接不上網路 瀏覽：1197
神武3手游網路連接 瀏覽：769
局網列印機網路共享 瀏覽：806