html和css結合實現手機端網頁自適應的程式碼

這篇文章帶給大家的內容是關於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.好了，接下來要為大家展示一個輪播圖效果來說明一下，先上程式碼

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">





    


    
  

    

 
     

        
 
       

        

        

        

        

      
    

    

    
  

   

相關推薦：

字體加陰影效果怎麼用css屬性實作？ （程式碼示範）

css怎麼實作滑鼠移動到div塊時自動加上陰影效果？

HTML與CSS3中的2D、3D結合實作動畫效果

以上是html和css結合實現手機端網頁自適應的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！