❶ html如何適應手機
有幾種，利用meta標簽、百分比法、使用CSS3單位rem、媒體查詢。
❷ CSS如何讓網站適應手機屏幕
並不是加了meta標簽，網站就會自適應手機屏幕了，還需要更改一些樣式。
你圖片上顯示搜索框的寬度是568px，但是頁面的寬度只有375（iPhone X的頁面顯示寬度），所以肯定會超出去，發生顯示不全的情況
這種情況你可以使用media標簽來做自適應
@mediaonlyscreenand(max-width:400px){
.search{width:300px}
}上面代碼的意思是當頁面寬度小於400px的時候 就讓.search的寬度變成300px。你可以吧上面的代碼加到你的css裡面看一下效果
❸ 網頁要讓它自適應各種手機屏幕寬度大小要怎麼設置
首先，在網頁代碼的頭部，加入一行viewport元標簽。
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置，包括IE9，對於那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
2、不使用絕對寬度由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。具體說，CSS代碼不能指定像素寬度：width:xxx px;
只能指定百分比寬度：width: xx%;或者width:auto;
3、相對大小的字體
字體也不能使用絕對大小（px），而只能使用相對大小（em）。
body {
font: normal 100% 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）。
❹ 如何讓網站自適應手機
關於網站如何做到自適應網頁，可根據如下操作：
首先，在網頁代碼的頭部，加入一行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規則。
其次，除了布局和文本，」自適應網頁設計」還必須實現圖片的自動縮放。有條件的話，最好還是根據不同大小的屏幕，載入不同解析度的圖片。有很多方法可以做到這一條，伺服器端和客戶端都可以實現。
❺ 請教，如何設置瀏覽器的網頁適合手機屏幕大
在這句話中，頁面的寬度可自動適應手機屏幕的寬度：[ ]查看HTML普通復制第一行：寬度=裝置寬度：寬度為設備屏幕的寬度，初始規模= 1：初始縮放比例minimuwport元標簽。視口是Web頁面的默認寬度和高度。上面的行代碼意味著頁面寬度等於屏幕寬度（寬度=設備寬度），原始縮放比例（初始比例= 1）為1，也就是說，初始頁面大小占屏幕區域的100%。
❻ 如何讓網頁自動適應手機屏幕大小 ，求方法，若有代碼更好，謝謝
在網頁的選項菜單里有「設置」-「縮放模式」/「適應屏幕」這兩個選項，不同手機大同小異，你自己看需要選吧。
❼ 怎麼讓網頁自動適應各個手機瀏覽器
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 。