前端關於移動端屏幕適配

時間 2019-11-19

標籤前端關於移動屏幕適配欄目無線简体版

原文原文鏈接

1.先談一下幾個概念
像素是度量的單位，能夠理解爲點
1.css像素
html中度量的單位用px來計算，在pc中每每 1 css px ＝ 1 物理像素
在不一樣設備中1css像素對應不一樣的設備像素(物理像素)
例如：iphone3分辨率是320*480 即 css 1px ＝ 1個物理像素；iphone4 分辨率640x960但屏幕尺寸沒有改變，意味着同一塊區域像素多了1倍即 css 1px ＝2個物理像素；
2.物理像素
表示每英寸所擁有的像素數目，數值越高，表明屏幕可以以更高的密度來顯示圖像
3.分辨率
顯示器所能顯示的像素多少，顯示器能夠顯示的像素越多，畫面就越精細，一樣的屏幕區域能顯示的信息就越多
4.PPI :是每英寸所擁有的像素（Pixel）數目
2.css那些單位
px：絕對單位，頁面按精確像素展現

100%：不是固定的，根據父元素決定的

em：相對單位，基準點爲父節點字體的大小，若是自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。

rem：相對單位，可理解爲」root em」, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持。

vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。
vmin：vw和vh中較小的那個。
vmax：vw和vh中較大的那個。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持
3.哪一種方法更適合來屏幕適配呢？
1.px?
很差用是由於無論在哪都是同樣的值，因此形成很大的差異，好比font-size:14px,pc的14px比手機的14px要大
2.100%?
百分比佈局時：div結構自適應，字體卻不能適應，很差用
3.em?em等於當前元素下字體的大小
很差的地方是改一處就會形成亂了
4.vw,vh雖然很好用可是目前瀏覽器支持不老老高。
5.綜合以上這裏推薦rem,根據屏幕的寬設置rem，當屏幕變大，全部隨之改變。
rem適配攻關點：
1.得到當前屏幕的大小
2.設置html的fontsize即rem
3.當屏幕大小改變，觸發函數從新計算
4.用到的關於代碼：
獲取當前屏幕的大小用：
一、若網頁中含有有了標準聲明（即頁面加上<!DOCTYPE html">這行代碼，標準聲明的存在會對document.body和document.documentElement的屬性值有影響）時，
則應該使用document.documentElement
二、若網頁中只有<html>而沒有上面的一行代碼，則JS腳本應該使用document.body
javascript

6.具體代碼以下：css

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>關於屏幕適配</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
width: 10rem;
height: 6rem;
background: red;
}
</style>
</head>
<body>
<div class="main">
我好你好你們好好好好好好
</div>
<script type="text/javascript">
// 不想手動刷新,但願頁面加載完畢的時候自動刷新
// 因此定義了一個匿名函數
(function(win,doc){
var fres=function(){
var html=doc.documentElement;
// 獲取屏幕的寬
var w=html.clientWidth;
// console.log(w);
// fontsize設置成1/10大,即rem
// 設置fontsize
html.style.fontSize=w/10+'px';
}
// 若是頁面加載完畢就調用函數fres(),
// 不然監聽頁面加載完畢，且完畢後fres();
// 頁面加載完畢判斷方法是從jquery中提取的
if(document.readyState==='complete'){
fres();
}else{
document.addEventListener('DOMContentLoaded',fres,false);
}

win.addEventListener('resize',fres,false);
})(window,document)

</script>
</body>
</html>html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。