1. Css單位中px、em和rem的區別
px 是像素（Pixel），這個好理解吧？
em 是指當猜遲前元素所使用的字體中大寫字母M的寬度。為什麼要單獨用M的寬度來表示呢？因為英文字體中有些是不等寬的字體，其中i的寬度最小，W的寬度最大，所以用M的寬度來做個代表，不過中文字體都是等寬的，沒有這方面的麻煩。我們可以簡單地把em理解為字體的大小，比如說當前元素的字體大小（font-size）是16px，那麼1em=16px，1.5em=24px，依此類推。
rem與em類似，只不過運羨它是以根元素（html）的字體大小作穗悄李為基本單位的。
em和rem主要用於頁面的彈性布局
2. 自媒體查詢、flex彈性布局、響應式布局及 rem 布局
自媒體查詢、rem布局、響應式布局技術，是告稿三個不同的技術。 自媒體查詢 常用在適配不同的設備顯示場景下，根據屏幕大小顯示不同頁面，但功能大致不變的這么一個技術。 rem布局 它是一個長度單位，這個長度單位是根據『根元素』的字體大小的單位確定的（根元素字體大小 = 1rem）。 響應式布局 它是在頁面寬度改變時，整個頁面或者頁面中的局部隨著頁面的縮放進行響應並實時變化（ 響應式布局和自媒體查詢有區別 ）。在如今復雜的開發中這幾個技術越來越密不可分，在項目中可以通過實際需求進行搭配。
功能： 自媒體查詢主要是設置不同的設備屏幕下的顯示樣式。
獲取瀏覽器或設備寬度：
min-device-width （設備的寬度）\ min-width (瀏覽器的寬度) （注釋：也可以獲取高度，就是將width改寫成height）
方法：
功能： 就是使用flex對頁面進行布局，也可以是響應式的。
方法： 一下方法為flex常用方法，具體學習可以點擊鏈接 flex布局
概念： 指相對跟元素的字體大小的單位。（補充：rem於em的區別一個是以根元素字體大小為參考，em是以父級元素為參考）
使用方法：
一般使用媒體查詢+rem或js,在不同寬度的窗口下自動調節字體大小。
布局特點： 不同設備對應不同的HTML或者局部自適應。（不同的設備不同的頁面）
布局襪升孝特點：確保一個頁面在所有終端上，都能顯示出令人滿意的效果。（一套方案，處處運行。）
設計思路：使用自媒體查詢及用 % 或 rem 作為單位，對不同視口設備進行編寫樣式。
布局特點：為了保證在各種屏幕上得不失真，就要根據實際屏幕寬度做等比換算。（一套方案，是不同尺寸、解析度的視口呈現出較好的效果。）
設計思路：使用自媒體查詢及用 % 或 rem 作為單位，對不同視口設備進行編寫樣式。
總結：
在項目開發中，根據項目的實際情況選擇不同的技術的搭配，這樣才能實現業務的效果。笑模
3. 移動端rem自適應布局-最簡單易懂的兩種方法
em 是個相對單位，等於該元素或父元素的font-size值；
rem: root 1rem等於根元素的font-size值
Vw（寬）、vh： 把屏幕分為100份，1vw等於屏幕的1%
1、給文件根元素設置font-size值（會影響字體，但可以解決）
<script>
//以iphone6為例，尺寸375，此時font-size=100px。便於計算
var fonsiz=document.documentElement.clientWidth/3.75;
document.documentElement.style.fontSize=fonsiz+"px";
</script>
2、給html設置rem布局後，需要給body重新設font-size，不然很難處理正常的尺寸
body {
碧陪巧 font-size: 16px;
}
3、vscode 安裝 px to rem 插件，設置其擴展設置的值為100
4、選中需要把px改為rem單位的css樣式，alt+z更換為rem布局
1、安裝px to rem插件設置100px轉換，如上圖3，100px=26.667vw=100/3.75，給html標簽設置vw
html {
font-size: 26.66667vw;
}
2、選中悔鍵需要把px改為rem單亂散位的css樣式，alt+z更換為rem布局
4. 淺談rem與rpx布局
rem大家或許都比較熟悉，而rpx則是騰訊在公測小程序時所推崇；二者實質並無太大的區別，在很多的小白前端開發階段會不懂為什麼一些老前端在開發移動端過程中會出現部分地方不使用rem或者rpx而轉用px，接下來談談我的看法：
一般開發中橫向布局通常使用rem/rpx布局，縱向布局部分使用px
（適用於一行布局中多個元素布局）
1. 這里以上圖為例，因為每一台手機的屏幕橫向的大小是固定的，如果使用px則可能在小屏幕出現位置不可控，導致首賀內容換行錯亂等問題。故使用rem/rpx單位布局。
2. 而手機縱向的高度是無限延伸的，所以上下邊距和邊框等則可以使用px固定像數，這樣不會對頁面效果產生太大影響，而且也不用擔心元素不可控錯亂等問題。
（適用於一行中單元素或者左右兩端的小型元素布局）
1. 同樣一上圖為例，對於這樣的單元素或者左右顫尺小元素，可以選擇px固定尺寸，原因是當橫行布局只有一個元素時根本不會產生錯亂，因為屏幕的寬度遠大於這點小元素的寬度，如果產生錯亂則可以放棄該手機適配了（這種小屏幕早該淘汰了）。
2. 縱向布局原理與上面一致。
本文章僅代表個人開發觀點，實際情況實際分析，如果還是不懂就記住一句話：發生者洞派錯亂就必須使用rem或者rpx布局；圍繞此觀點就不會有錯。如果有錯誤還望各位大師指出，這也是我第一次寫文章，多多指教。
5. 響應式布局-PC端和移動端同時適配
第二種 rem響應式兄嘩布局方案(等比縮放)：
使用的時候按照1920的設計稿來做。100px=1rem，font-size設置成100px; 750px的設計稿 1rem = 100px 設置屏幕超過2560及以上，就固定1rem = 200px， 寬度小於600及以下，就固定1rem = 32px
第三方庫用的一般是使基困用px單位，無法使用rem適配不同設備的屏幕羨鋒行。
解決辦法：使用px2rem-loader插件將第三方ui庫的px轉換成rem單位。
移動端設計稿一般都是750px的，所切的圖就是@2x 的，在一些DPR為3.0的手機上使用@2x圖片大多數也會顯示的很清晰，這樣就是為什麼設計稿要750px的
6. 11.CSS布局篇之響應式——rem
rem是什麼攔碰？
px，絕對長度單位，最常用
em，相對長度單位，相對於父元素，不常用
rem，雹爛相對長度單位簡肆談，相對於根元素，常用於響應式布局
響應式布局的常用方案
media-query,根據不同屏幕寬度設置根元素font-size
rem,基於根元素的相對單位
rem的弊端：「階梯性」
7. 黑馬程序員pink老師什麼級別
高級程序員。黑馬程序員pink老師懂得計算機的基本操作，基本了解計算機的基本操作，了解計算機專業的一些基本知識，掌握基本的編程語言，如Java、python或JavaScript屬於高級程序員。
8. css樣式布局及rem用法梳理
視口（viewport）是答返用來約束網頁中最頂級塊元素的，即它決定了網頁的大小，網頁是先在視口上渲染，然後再通過視口放回到瀏覽器窗口上的，網頁的渲染過程如下：
pc端視口的大小和瀏覽器的大小一樣，所以網頁是1：1的放到瀏覽器窗口上，而移動端視口就有點特殊，移動端視口的寬度是比移動端屏幕要寬，寬度尺寸一般是980px或者1024px，網頁是視口上渲染完之後，為了能在移動端屏幕上顯示整個網頁，整個視口會整體縮放到屏幕的寬度，這樣，網頁看上去就整體縮放
具體如何設置視口以及禁止視口頁面縮放可以自行網路
（主要針對移動端以及pc端網頁需要實現等比放大縮小頁面效果）
大概有以下幾種
1、流體布局
流體布局其實就是寬度用百分比，高度用固定值的布局方式，寬度通過百分比來適配不同寬度的屏幕。
為了適配手機端不同尺寸的屏幕，我們在定義元素寬度的時候可以寫百分比，百分比是相對於屏幕的寬度，所有寬度就可以做到自適應，而在高度方向，由於網頁的高度是不定的，所以我們可以把高度寫成固定的值(px),這種布局方式叫做流體布局。
注意兩個概念
2、彈性盒模型布局flex
這種布局方式是通過css3新增的一些輔助布局的樣式屬性來製作布局的方式。
3、rem布局
rem是一種相對長度單位，通過這個長度單位可以實現元素寬高等比例縮放，從而完成不同寬度屏幕的適配。
4、響應式布局 （媒體查詢）
通過樣式動態查詢屏幕的寬度，動態切換樣式來適配不同寬度屏幕的布局方式。
Bootstrap是最典型的一種
待補充
實際開發中，pc端頁面需要實現響應式等比縮放（即自適應），使清族飢用rem+彈性布局是比較現實及理想的解決方式
移動端可以使用rem布局，也可以使用px實現（主要用flex），具體看產品是怎麼設計要求的
css3規定：1rem的大小就是根元素<html>的font-size的值。
rem其實是一個單位 ，是個相對單位 root em。rem就是root（根元素的大小）相對於html元素的字體大小的單位。
rem布局的原理
就是根據一個html根元素來控制，網頁的布局，實現類似於自適應等比例的縮放的布局。
rem優勢
通過修改html文字的大小，來改變頁面中元素的大小，實現了頁面的整體控制
rem的作用
通過設置 根元素<html>的font-size的大小，來控制整個html文檔內的字體大小、元素寬高、內外邊距等，根據移動設備的寬度大小來實現自適應，不同的設備都展示一致的頁面效果。
簡單用法
vscode中安裝cssrem插件，通過這個插件可以自動穗漏計算rem數值。
具體設置如下
注意:設置後 vscode軟體需要重啟 否則計算的rem值會出錯
待補充
可以通過js的方式來改變，也可以通過css媒體查詢的方式來改變，
待補充
9. 在黑馬程序員學習了前端，web前端的工作有哪些主要內容
web前端要精通html +css ，js，這是最基本的。像網站，美工 ，製作，這些都要過關 。 還要熟悉一些後台語言 （後台的不一定要會寫，看得懂就好）、SEO。要製作一個網站的前端頁面，涉及到代碼優化， 規范，交互效果，兼容問題(ie6-11;ff;chrome;oprea;[響應式布局])。不過也不容擔心看上去多，只要真正靜下心來做，也會逐一擊破，黑馬程序員的口碑一直很好，可以學到真本事，相信題主以後的發展也會越來越好的。