溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹html+css如何實現手機端網頁自適應，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
一，最近在做項目，寫移動端的網頁，主要是自適應的問題。bootstrap等前端框架用的不好，又不想耽誤時間，不能自適應很煩人，這里給大家介紹下我的方法，
也是結合了很多人的思路。
1.在頭部加入這樣的一行代碼：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
這句話是自動設置縮放，然而，它并不能完全適應所有的手機，并且你在用瀏覽器手機模式調試的時候可能正常，但是換到真實的手機端其實是不正常的。所以我們還要進行改動。
2.這里推薦大家在用magin,padding,font-size,等屬性的時候用rem替代px，你可能對rem比較陌生，這里我提供好了一段js代碼，直接引入即可，不需要糾結rem是怎么回事，關于原理，我再寫篇博客做介紹，這篇博客講怎么使用。就是以下的這段js代碼，再寫網頁的時候放入html中即可。下面代碼中的640指的是手機的屏幕寬度，一般來講市面上的手機屏幕的寬度最大是640px，所以這里用i=640指代屏幕的最大寬度，最小是320px，然后通過引用下面的js你就可以書寫自己的網頁了，要記得本js的1rem=100px哦，其實是為了好換算，比如font_size:14px;我們就可以寫成，font_size:0.14rem。
<script>
!function(n) {
var e = n.document,
t = e.documentElement,
i = 640,
d = i / 100,
o = "orientationchange" in n ? "orientationchange": "resize",
a = function() {
var n = t.clientWidth || 320;
n > 640 && (n = 640),
t.style.fontSize = n / d + "px"
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
} (window);
</script>3.好了，接下來為大家展示一個輪播圖效果來說明一下，先上代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>無標題文檔</title>
<script src="images/jquery-1.js"></script>
<script src="images/TouchSlide.js"></script>
<script src="images/rem.js"></script>
<style>
/* banner 輪播切換 star */
body{margin:0 auto !important;max-width:640px;min-width:320px;background: #fff !important;overflow-x: hidden;}
#banner{position: relative;}
#banner .hd{position: absolute;width: 100%;text-align: center;bottom: 2%;left: 0;}
#banner .hd li{width: 0.2rem;height: 0.2rem;border:1px solid #fff;border-radius: 50%;display: inline-block;margin:0 4px;}
#banner .hd li.on{background: #9e5fd4;border-color:#9e5fd4; }
</style>
<script type="text/javascript">
$(function(){
/*根據banner個數增加下方指示點*/
n=$(".ibanner .bd li").size();
for (m=0;m<n;m++){
$('.ibanner .hd').append('<li></li>');
}
/*banner切換*/
if($('.ibanner').length){
TouchSlide({slideCell: "#banner",mainCell: ".bd",autoPlay: true,effect: "leftLoop",interTime:5000});
}
});
</script>
</head>
<body>
<!-- 上部輪播開始-->
<p id="banner" class="ibanner">
<p class="tempWrap" style="overflow:hidden; position:relative;">
<ul class="bd" style="width: 3840px; position: relative;
overflow: hidden; padding: 0px; margin: 0px; transition-duration: 200ms;
transform: translateX(-2560px);">
<!-- 此處添加倫比圖片-->
<li style="display: table-cell; vertical-align: top; width:
640px;"><a
href="https://cache.yisu.com/upload/information/20200318/90/8453.jpg"></a></li>
<li
style="display: table-cell; vertical-align: top; width: 640px;"><a
href="https://cache.yisu.com/upload/information/20200318/90/8454.jpg"></a></li>
<li
style="display: table-cell; vertical-align: top; width: 640px;"><a
href="https://cache.yisu.com/upload/information/20200318/90/8455.jpg"></a></li>
<li
style="display: table-cell; vertical-align: top; width: 640px;"><a
href="https://cache.yisu.com/upload/information/20200318/90/8456.jpg"></a></li>
<li
style="display: table-cell; vertical-align: top; width: 640px;"><a
href="https://cache.yisu.com/upload/information/20200318/90/8457.jpg"></a></li>
</ul>
</p>
<ul class="hd">
</ul>
</p>
<!-- 上部輪播結束-->
</body>
</html>以上是html+css如何實現手機端網頁自適應的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
