功能簡介：
????自媒體查詢浦译、rem布局、響應(yīng)式布局技術(shù)溯职，是三個(gè)不同的技術(shù)精盅。 自媒體查詢 常用在適配不同的設(shè)備顯示場景下，根據(jù)屏幕大小顯示不同頁面谜酒，但功能大致不變的這么一個(gè)技術(shù)叹俏。rem布局 它是一個(gè)長度單位，這個(gè)長度單位是根據(jù)‘根元素’的字體大小的單位確定的（根元素字體大小 = 1rem）僻族。響應(yīng)式布局 它是在頁面寬度改變時(shí)粘驰，整個(gè)頁面或者頁面中的局部隨著頁面的縮放進(jìn)行響應(yīng)并實(shí)時(shí)變化（響應(yīng)式布局和自媒體查詢有區(qū)別）。在如今復(fù)雜的開發(fā)中這幾個(gè)技術(shù)越來越密不可分述么，在項(xiàng)目中可以通過實(shí)際需求進(jìn)行搭配蝌数。
自媒體查詢：
? ? ? ? 功能：自媒體查詢主要是設(shè)置不同的設(shè)備屏幕下的顯示樣式。?
? ? ? ? 獲取瀏覽器或設(shè)備寬度：
????????????????????min-device-width （設(shè)備的寬度）\? ?min-width? (瀏覽器的寬度)? ?（注釋：也可以獲取高度度秘，就是將width改寫成height）
? ? ? ? 方法：
?公共部分：? ? ? ? ? ? ??
?<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
? ? ? ? ?內(nèi)部樣式引用（可以編寫多組）：? ? ??
? ? ? ? ? ? ? ?1顶伞、 <style> @media?screen?and?(min-device-width:200px)?and?(max-device-width:300px)?{? /*?編寫樣式?*/? }?</style>?? ? ? ? ? ? ? ?2、 <style?media='(min-device-width:200px)?and?(max-device-width:300px)'> /*?編寫樣式?*/? </style>??
? ? ? ? 外部樣式引用（可以引用多個(gè)外部樣式表）：
? ??????????????1、<link?rel="stylesheet"?href="樣式路徑"?media='(min-device-width:200px)?and?(max-device-width:300px)'>
? ??????????????????
flex彈性布局：
? ? ? ? ?功能：? 就是使用flex對頁面進(jìn)行布局枝哄，也可以是響應(yīng)式的肄梨。
? ? ? ? ?方法：? ?一下方法為flex常用方法，具體學(xué)習(xí)可以點(diǎn)擊鏈接??flex布局
? ? ? ? ? ? ? ? 作用在父元素的方法：
? ? ? ? ? ? ? ? ? ? ? ? flex-direction:? 設(shè)置主軸方向
? ? ? ? ? ? ? ? ? ? ? ? flex-wrap:? 是否讓子元素?fù)Q行
? ? ? ? ? ? ? ? ? ? ? ? justify-content：設(shè)置主軸對齊方式
? ? ? ? ? ? ? ? ? ? ? ? align-items:? 設(shè)置交叉軸的對齊方式
? ? ? ? ? ? ? ? 作用在子元素的方法（簡寫）：
? ? ? ? ? ? ? ? ? ? ? ? flex：參數(shù)一（數(shù)字）挠锥、參數(shù)二 （數(shù)字） 众羡、參數(shù)三（px / %）? ? ? ?
? ? ? ? ? ? ? ? ? ?參數(shù)一：子元素平分多余父元素的空間。? ? ?參數(shù)二：子元素按比例壓縮超出父元素的寬度蓖租。? ? ? 參數(shù)三：設(shè)置該元素的寬粱侣。
? ? ? ? ? ? ? ? ? ?
rem的使用方法
? ? ? ? 概念：指相對跟元素的字體大小的單位。（補(bǔ)充：rem于em的區(qū)別一個(gè)是以根元素字體大小為參考蓖宦，em是以父級元素為參考）
? ? ? ? 使用方法：
? ? ? ? ? ? ? ? 一般使用媒體查詢+rem或js,在不同寬度的窗口下自動(dòng)調(diào)節(jié)字體大小齐婴。
手動(dòng)設(shè)定：
? ??????<style> html{ font-size:?18px;? }? </style>? ? 1rem = 18px
js方式自適應(yīng)：
????????const?c?=?()=>{
????????????????let?w?=?document.documentElement.clientWidth;?//?獲取設(shè)備的寬度
????????????????let?n?=?(20*(w/320)>40?40+'px':(20*(w/320)+'px'))?//20為參數(shù)??320設(shè)備寬度??40顯示最大字號
????????????????document.documentElement.style.fontSize?=?n? ? ? ? // 設(shè)置根字體大小
????????}
????????window.addEventListener('load',c)? ? ?//初始值
????????window.addEventListener('resize',c)? ? ?//屏幕改變的是的值
????</script>
自適應(yīng)布局
布局特點(diǎn)：不同設(shè)備對應(yīng)不同的HTML或者局部自適應(yīng)。（不同的設(shè)備不同的頁面）
js實(shí)現(xiàn)方法：
<script>????????const?redireat?=?()=>{
????????????let?userAgent?=?nevigator.userAgent.toLowerCase()? ?//獲取設(shè)備信息
????????????let?device?=?/ipad|iphone|midp|rv:1.2.3.4|ucwed|android|windows?ce|windows?mobile/???//適配不同設(shè)備
????????????if(derice.test(userAgent)){
????????????????window.location.href?=?'move.html'??//跳轉(zhuǎn)移動(dòng)端頁面
????????????}else{
????????????????window.location.href='pc.html'???//跳轉(zhuǎn)PC端頁面
????????????}
????????}
????????redireat()
????</script>
響應(yīng)式布局
????????布局特點(diǎn)：確保一個(gè)頁面在所有終端上稠茂，都能顯示出令人滿意的效果柠偶。（一套方案，處處運(yùn)行睬关。）
? ? ? ? 設(shè)計(jì)思路：使用自媒體查詢及用 % 或 rem 作為單位诱担，對不同視口設(shè)備進(jìn)行編寫樣式。
rem彈性布局
????????????布局特點(diǎn)：為了保證在各種屏幕上得不失真电爹，就要根據(jù)實(shí)際屏幕寬度做等比換算蔫仙。（一套方案，是不同尺寸丐箩、分辨率的視口呈現(xiàn)出較好的效果摇邦。）
? ???????????設(shè)計(jì)思路：使用自媒體查詢及用 % 或 rem 作為單位，對不同視口設(shè)備進(jìn)行編寫樣式屎勘。
總結(jié)：
? ? ? ? 在項(xiàng)目開發(fā)中施籍，根據(jù)項(xiàng)目的實(shí)際情況選擇不同的技術(shù)的搭配，這樣才能實(shí)現(xiàn)業(yè)務(wù)的效果概漱。
