第一課移動(dòng)端響應(yīng)式

1、2022/9/3移動(dòng)端&響應(yīng)式調(diào)試工具介紹(chrome Emulation)Device (設(shè)備相關(guān))自定義尺寸Network(網(wǎng)絡(luò)模擬)User Agent(瀏覽器信息)縮放Media (媒體)Network(網(wǎng)絡(luò)模擬)Sensors (傳感器)經(jīng)緯度陀螺儀 (、 z、x、y）本地服務(wù)器搭建搭建服務(wù)器 | HBuilder同一網(wǎng)絡(luò)下用設(shè)備連接*關(guān)閉防火墻像素比（devicePixelRatio）點(diǎn)、points（抽象單位 ）像素渲染（柵格化）物理像素 （調(diào)整大小）dpi、ppi 獲取像素比 （window.devicePixelRatio）參考： viewport（視口）width 設(shè)備寬

2、度 pixel_value | device-widthuser-scalable 是否允許縮放 （no|yes）initial-scale 初始比例minimum-scale 允許縮放的最小比例maximum-scale 允許縮放的最大比例target-densitydpi (以淘汰)動(dòng)態(tài)控制比例1/像素比前期準(zhǔn)備布局單位介紹、選擇默認(rèn)樣式處理-webkit-tap-highlight-color:transparent;input -webkit-appearance:none;/*去除input默認(rèn)樣式*/框架搭建橫豎屏適配getBoundingClientRect().widthres

3、ize、orientationchange媒體查詢all 所有媒體braille 盲文觸覺設(shè)備embossed 盲文打印機(jī)print 手持設(shè)備projection 打印預(yù)覽screen 彩屏設(shè)備speech 聽覺類似的媒體類型tty 不適用像素的設(shè)備tv 電視媒體特性min-width分辨率寬度大于等于設(shè)置值的時(shí)候識(shí)別max-width分辨率寬度小于等于設(shè)置值的時(shí)候識(shí)別orientation:portrait 豎屏orientation:landscape橫屏-webkit-min-device-pixel-ratio:2 像素比關(guān)鍵字and和、與 （連接媒體特性）not排除指定媒體類型onl

4、y指定某種特定的媒體類型很多時(shí)候是用來對(duì)那些不支持媒體特性但卻支持媒體類型的設(shè)備樣式引用外聯(lián)樣式表linkmedia=all and (min-width:600px)importimport url(index.css) all and (min-width:600px)常規(guī)尺寸media all and (min-width:1200px)/大分辨率（PC分辨率、TV）media all and (min-width:850px) and (max-width:1199px)/中等分辨率（PC小分辨率 | pad）media all and (min-width:700px) and (max-width:849px)/pad設(shè)備media all and (min-width:480px) and (max-