一，最近在做項目，寫移動端的網頁，主要是自適應的問題。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 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 >
相關推薦：
字體加陰影效果怎么用css屬性實現？（代碼演示）
css怎么實現鼠標移動到div塊時自動加陰影效果？
HTML和CSS3中的2D、3D結合實現動畫效果
以上就是html和css結合實現手機端網頁自適應的代碼的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。