圖片全屏覆蓋
我們可能希望實現圖片的全屏覆蓋，這種覆蓋是隨着網頁大小而調整的，而不是固定的，怎麼做呢？
請看以下CSS代碼：
body{
background:url("img.jpg") no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
效果展示：
文本水平垂直居中
<center>標籤可以居中，但早已不被建議使用，實現居中應該使用CSS實現。
下面的CSS代碼實現的不僅僅是水平、垂直雙居中，而且是兼容網頁變化的實現：
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
效果展示：
文本自適應縮放
上面的文本字體大小設計，看似還行，但如果我們把瀏覽器縮小，會看到：
此時文本文字就顯得過大，我們必須要儘量做到自適應。
在網上查了些資料，發現必定都是大神，因爲根本就不詳細說，也沒有代碼說明，對讀者極不友好，那就只能自己研究了。
說結論之前，先推薦一篇文章：《網頁字體單位px、em、%、rem、pt、vm、vh介紹》
讀過這篇文章，我決定改選vw作爲字體大小單位，經過測試，選擇2vw（10vw太大，0,1vw太小）。
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size:2vw;
color:#a8e346;
}
效果：
可以看出：基本算是實現了自適應。
另外，在網上看到這麼一段代碼，感興趣的可以自己去試試：
<script type="text/javascript" >
//網頁字跟隨頁面自動變化
function setRem(){
//獲取當前頁面的寬度
var width = document.body.offsetWidth;
//設置頁面的字體大小
var nowFont=width/375*20;
//通過標籤名稱來獲取元素
var htmlFont=document.getElementsByTagName('html')[0];
// 給獲取到的元素的字體大小賦值
htmlFont.style.fontSize =nowFont+"px";
}
setRem();
//監聽屏幕變化
window.οnresize=setRem;
</script>
本文完整網頁源碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" ;charset="utf-8">
<title>賞金獵人</title>
<style>
body {
background:url("img.jpg") no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size:2vw;
color:#a8e346;
}
</style>
</head>
<body>
<div>
<h1>這是一段普普通通的文本</h1>
</div>
</body>
</html>