自適應佈局，響應式佈局以及rem,em區別

時間 2019-11-30

標籤自適應佈局響應以及 rem 區別欄目 CSS 简体版

原文原文鏈接

1、自適應和響應式css

先說共同點：html

　　　　二者都是由於愈來愈多的移動設備（ mobile, tablet device ）加入到互聯網中來而出現的爲移動設備提供更好的體驗的技術。用技術來使網頁適應從小到大（如今到超大）的不一樣分辨率的屏幕.都是爲了解決同一張頁面在不一樣設備分辨率上合理展現的技術。瀏覽器

不一樣點：服務器

　　　　響應式佈局：無論用戶使用的是什麼設備都是在服務器把數據推送到瀏覽器後，腳本或CSS自行偵測屏幕大小後執行對應的樣式表內容，而且一直經過本地腳本在監聽屏幕大小的變化，隨時作出樣式響應的變化，因此是主動的。同一頁面在不一樣大小設備可能呈現不同的頁面效果佈局

　　　　自適應：不一樣大小設備呈現一樣的頁面效果，只是文字、圖片等的大小不同，可是相對位置同樣。即在不一樣大小設備看起來同樣測試

　　　　　　如圖：字體

2、rem,em區別spa

rem,em都是順應不一樣網頁字體大小展示而產生的code

em：是相對其父元素，在實際應用中相對而言會帶來不少不便htm

rem：是始終相對於html大小，即頁面根元素

可看下面例子

<html>
<head>
<tit></tit>
<style type="text/css">
html{
   font-size: 10px;
}
.content{
   font-size: 1.5rem;
//font-size: 1.5em;

}

.content p{
   font-size: 1rem;      //若是使用rem,p文字font-size:1*10px=10px

//font-size: 1em;        //若是使用em,p文字font-size: 1*1.5*10px=15px,由於其父元素是.content,因此要以父元素1.5em(1.5*10px)爲準

}
</style>
</head>
<body>

<div class="content">

<p>測試文字</p>

</div>

</body>

</html>