【CSS3】CSS实现の全屏覆盖+居中显示+等比缩放
生活随笔
收集整理的這篇文章主要介紹了
【CSS3】CSS实现の全屏覆盖+居中显示+等比缩放
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
圖片全屏覆蓋
我們可能希望實現(xiàn)圖片的全屏覆蓋，這種覆蓋是隨著網(wǎng)頁大小而調(diào)整的，而不是固定的，怎么做呢？
請看以下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>標(biāo)簽可以居中，但早已不被建議使用，實現(xiàn)居中應(yīng)該使用CSS實現(xiàn)。
下面的CSS代碼實現(xiàn)的不僅僅是水平、垂直雙居中，而且是兼容網(wǎng)頁變化的實現(xiàn)：
div {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); }效果展示：
文本自適應(yīng)縮放
上面的文本字體大小設(shè)計，看似還行，但如果我們把瀏覽器縮小，會看到：
此時文本文字就顯得過大，我們必須要盡量做到自適應(yīng)。
在網(wǎng)上查了些資料，發(fā)現(xiàn)必定都是大神，因為根本就不詳細(xì)說，也沒有代碼說明，對讀者極不友好，那就只能自己研究了。
說結(jié)論之前，先推薦一篇文章：《網(wǎng)頁字體單位px、em、%、rem、pt、vm、vh介紹》
讀過這篇文章，我決定改選vw作為字體大小單位，經(jīng)過測試，選擇2vw（10vw太大，0,1vw太小）。
div {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size:2vw;color:#a8e346; }效果：
可以看出：基本算是實現(xiàn)了自適應(yīng)。
另外，在網(wǎng)上看到這么一段代碼，感興趣的可以自己去試試：
<script type="text/javascript" >//網(wǎng)頁字跟隨頁面自動變化function setRem(){//獲取當(dāng)前頁面的寬度var width = document.body.offsetWidth;//設(shè)置頁面的字體大小var nowFont=width/375*20;//通過標(biāo)簽名稱來獲取元素var htmlFont=document.getElementsByTagName('html')[0];// 給獲取到的元素的字體大小賦值htmlFont.style.fontSize =nowFont+"px";}setRem();//監(jiān)聽屏幕變化window.οnresize=setRem; </script>本文完整網(wǎng)頁源碼
<!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>總結(jié)
以上是生活随笔為你收集整理的【CSS3】CSS实现の全屏覆盖+居中显示+等比缩放的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Java】浅析八种基本类型和包装类型
- 下一篇： CSS 基本样式