一.多種屏幕(響應式）
響應式是一種在多種設備(比如pc端 移動端)不同分辨率情況下使界面展現最大程度適應尺寸的手段。響應式包含了移動端適配，也可以使移動端不同分辨率展現不同樣式。移動端適配則相對精準，是指僅針對移動端的適配方案。
1.百分數
最原始我們可以使用百分數來讓界面達到適配效果。
*,html{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
width: 100%;
}
header{
width: 100%;
height: 10%;
background-color: #eee;
}
.info{
width:80%;
height: 100%;
background-color: #fff;
}
<body>
<header>
<div class="info">
this is info
</div>
</header>
</body>
使用百分數計算起來有點麻煩，首先需要在html、body上寬高都設置100%，然後子元素根據需要設置寬度高度，需要元素自適應的時候就用上百分數計算(相對父元素寬高計算)。
上述header相對body的高度設爲10%，info在header元素裏面，想要設置與header一樣高度的元素，高度就設置100%。
缺點：
1).不能字體大小自適應，需手動計算
2).百分數設置麻煩尤其是高度
3).奇數分割容器得不到精確寬度
2.Media媒體查詢
媒體查詢可以針對不同屏幕尺寸設置不同的樣式。
@media screen and (min-width: 375px) {
.container{
width: 100%;
height: 100px;
background-color: bisque;
}
}
@media screen and (max-width: 375px) {
.container{
width: 50%;
height: 100px;
background-color: burlywood;
}
}
<div class="container">
</div>
上述使用媒體查詢，在屏幕分辨率寬大於375px的時候container的寬度爲100%，當屏幕寬度小於375px時container寬度爲50%。還可以將尺寸設置得更細緻。
一般media screen 與rem配合使用效果更加，因爲根據媒體查詢劃分屏幕區間的話有點粗糙，分辨率區間與區間之間可能跳度過大，而且需要在每個區間裏單獨設置樣式，樣式繁冗。
@media screen and (min-width: 375px) {
html{
font-size: 25px;
}
}
@media screen and (max-width: 375px) {
html{
font-size: 15px;
}
}
.container{
width: 16rem;
height: 100px;
background-color: bisque;
}
上述在不同分辨率下設置字體後，屏幕寬度改變，container的寬度、字體也會跟着改變，只需要寫一遍container樣式就可以在分辨率改變的時候改變樣式。
html的font-size一般需要根據設備分辨率來動態計算。
缺點：只用media：每個分辨率區間都要單獨寫樣式，麻煩、不利於維護、樣式冗餘。 與rem一起用：需要手動計算字體大小。
3.絕對定位
body{
position: absolute;
top:0;
left: 0;
right:0;
bottom:0;
}
.container{
position: absolute;
top:0;
left: 0;
right:0;
bottom:0;
}
.top-bar{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: calc(100% - 50px);
background-color: #eee;
}
.info{
width:50px;
position: absolute;
top: 0;
bottom:0;
background-color: #ddd;
}
.right-info{
position: absolute;
top: 0;
bottom:0;
left: 50px;
right: 0;
background-color: #fff;
}
.content{
position: absolute;
top:50px;
bottom:0;
width: 100%;
background-color: antiquewhite;
}
<div class="container">
<div class="top-bar">
<div class="info">
info
</div>
<div class="right-info">
right info
</div>
</div>
<div class="content">
</div>
</div>
絕對定位需要先固定一個寬/高度，然後其它元素根據這個元素的寬/高再計算。像一些左中右佈局，左右兩邊寬度固定，中間不設置寬度，就能讓中間區域達到響應的效果。
可以與百分數一起使用能夠達到更好的效果。
缺點：
1).不能字體大小自適應，需手動計算
2).計算麻煩
3).視覺體驗並不友好
相關還有display:flex、table-cell，(display: grid; grid-template-columns: Xpx Xpx Xpx; grid-template-rows: Xpx Xpx Xpx)
二.移動端常用適配
4.rem
rem需要給html標籤元素設置字體大小，字體設置多少就會根據字體大小來變換尺寸。
document.documentElement.style.fontSize = document.documentElement.clientWidth / (設計稿寬/100) + 'px';
在給字體設置rem的時候，在不同屏幕下絕對尺寸不一致，最好是獨立設置
@media screen and (min-width: 375px) and (max-width: 640px) {
.div{
font-size: 15px;
}
}
@media screen and (max-width: 375px) {
.div{
font-size: 14px;
}
}
與resize方法配合使用可以在屏幕寬度變化時動態改變字體大小而不是手動刷新.
window.addEventListener('resize', ()=>{
document.documentElement.style.fontSize = document.documentElement.clientWidth / (設計稿寬/100) + 'px';
});
5.vw
安裝：
npm i --save-dev postcss-px-to-viewport
新建：postcss.config.js
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
viewportWidth: 750, // 視窗的寬度，對應的是我們設計稿的寬度，一般是750
viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，一般指定1334，也可以不配置
unitPrecision: 3, // 指定`px`轉換爲視窗單位值的小數位數
viewportUnit: "vm", //指定需要轉換成的視窗單位，建議使用vw
selectorBlackList: ['.ignore'],// 指定不轉換爲視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名
minPixelValue: 1, // 小於或等於`1px`不轉換爲視窗單位，你也可以設置爲你想要的值
mediaQuery: false // 允許在媒體查詢中轉換`px`
}
}
};
@keyframes 和media查詢裏的px默認是不轉化的，設置mediaQuery： true則媒體查詢裏也會轉換px
@keyframes可以暫時手動填寫vw單位的轉化結果
viewportUnit也可以設置成
vh, vmin, vmax，但是需要計算字體大小。
postcss-px-to-viewport 是藉助postcss工具編寫的postcss插件：
module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {
//。。。
}
通過這個函數計算單位：
function createPxReplace(opts, viewportUnit, viewportSize) {
return function (m, $1) {
if (!$1) return m;
var pixels = parseFloat($1);
if (pixels <= opts.minPixelValue) return m;
var parsedVal = toFixed((pixels / viewportSize * 100), opts.unitPrecision);
return parsedVal === 0 ? '0' : parsedVal + viewportUnit;
};
}
vw相對於視口的寬度。視口被均分爲100單位的vw
h1 { font-size: 8vw; }
如果視口的寬度是200px，那麼上述代碼中h1元素的字號將爲16px，即(8x200)/100
也就是說將px轉換爲vw的公式爲：16*100/200 <=>16/200*100 <=> 上述createPxReplace方法中的pixels / viewportSize * 100< => 我們設置的px大小/視窗分辨率(設計稿大小)*100
5.微信rpx
rpx是微信小程序的css單位，可以根據屏幕尺寸適應。
默認375px屏幕寬度下 1rpx = 0.5px
rpx換算px(屏幕寬度/750) ,px換算rpx(750/屏幕寬度)