標籤：比較 type element nta 效果 改變 res style tle
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中，這種情況代碼量比較大，螢幕中類也挺多的
h5移動端螢幕適配
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
