1.rem
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title>Document</title> <style> html{ font-size: 20px; //設置1rem代表的大小，一般選用20比較好計算 } body{ margin:0; overflow: hidden; } </style> </head> <body> <script> (function (doc, win){ var html = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //手機橫屏，豎屏可在此處設置 recalc = function(){ var clientWidth = html.clientWidth; if (!clientWidth) return; docE1.style.fontSize = 20*(clientWidth/320) + 'px'; //以iphone4屏幕為基准 }; if (!doc.addEventListener) return; win.addEventListener('DOMContentLoaded', recalc, false); //$(window).on('resize',function(){}) })(document, window); </script> </body> </html>
上述代碼，便是屏幕適配的整個框架，可以適用手機，平板，電腦。
可以在其中寫入自己的代碼，以rem為單位（此代碼1rem=20px）；
有縮放效果，以px為單位，是絕對值，不會隨着屏幕大小的改變，而改變；
以百分比為單位，注意將標簽的所有父元素都已百分比為單位，同樣有縮放效果；
2.從css角度考慮
<meta charset="UTF-8"> <title>Document</title> <style> html,body{ margin:0; padding:0; } .wp{
width:800px;
} @media screen and (min-width: 1000px){ } @media screen and (min-width: 640px) and (max-width:999px){ .wp{ width:800px; } } @media screen and (max-width:639px){ .wp{
width:800px;
} } </style> </head> <body> <div class="wp"> </div> </body> </html>
上述代碼中一個@media代表一種屏幕大小，相當於js中的一個if語句，然后將在不同屏幕下顯示的樣式分別寫進自己的@media中，這種情況代碼量比較大，屏幕中類也挺多的