WAP移動端頁面顯示,文字和內容等比縮放的實現
阿新 • • 發佈:2018-12-23
同一個頁面,在不同顯示比例下如何等等比縮放而使頁面不會變形
比如同一個頁面下,372px 和642px顯示比例下文字大小和塊元素高度會隨著顯示的比例來等比縮放
比例始終顯示協調,不用重複除錯,其中一個重要的元素是將所有定義寬高的元素設定為rem
rem是一個相對大小的值,它相對於根元素<html>, 比如假設,我們設定html的字型大小的值為html{font-size: 87.5%;}(也就是14px)。 然後其他的字型就是將你要的值除以14得到的值; 比如iphone5主題大小是320px;換算成rem就是320/14=22.85714rem; padding的24px也就是24/14=1.714285714285714rem,以此類推。 上面的14是個變數,相對於你對根元素html字型大小的設定,如果你設定的是62.5%,那除數就變成10了,對照表如右圖: 用這個rem單位的好處有啥我不知道,不過如果你根元素的字型大小選62.5%,那px和rem之間的換算就是px直接除以10就得到rem了,這比em簡單多了,到現在我都沒搞清楚em和px之間是如何換算的。 另外rem在ie8及ie8以下的版本不支援外其他瀏覽器都支援,如果你要考慮ie8及一下,可以設定個px再設定個rem就可以了。
如上圖,當然只有rem元素還是不夠的,以下是整個過程的實現。
程式碼如下
<div class="header">
css中單位px和em,rem的區別!<br>
國內的設計師大都喜歡用px,而國外的網站大都喜歡用em和rem,那麼三者有什麼區別,又各自有什麼優劣呢?下面給大家詳細介紹下。
</div>
一、在head裡面加入
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
在移動裝置上進行網頁的重構或開發,首先得搞明白的就是移動裝置上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有關的meta標籤的使用,才能更好地讓我們的網頁適配或響應各種不同解析度的移動裝置。
二、CSS中新增程式碼
html{font-size: 625%;} body {font-family: "Microsoft YaHei";color: #333;width: 100%;max-width: 640px;min-width: 320px;margin:0 auto;} .header{ height: 1rem; background: #ccc; font-size: 0.2rem; text-align: center; padding-top: 0.1rem }
移動端設定頁面最大寬度640px 最小寬度320pxfont-size:625% 是相對於裝置預設的字型大小,那麼接下來就要定義裝置的預設字型大小 font-size,
三、header 中加入JAVASCRIPT 程式碼
<script src="http://www.meiya.org.cn/style/js/jquery-1.9.1.min.js"></script>
<script>
$(function () {
function resi() {
var html = document.querySelector("html");
var wW = document.body.clientWidth || document.documentElement.clientWidth;
var maxW = 640;
var minW = 320;
if (wW > maxW) wW = maxW;
var ratio = wW / minW;
html.style.fontSize = 50 * ratio + "px"
}
window.addEventListener("DOMContentLoaded", function() {
var bodys = document.querySelector("body").style;
bodys.opacity = "1";
bodys.filter = "alpha(opacity=100)";
resi()
});
window.addEventListener("resize", resi);
});
</script>
以上程式碼根據裝置寬度自動匹配字型大小,從而實現等比縮放的效果。