二、螢幕的相關概念
三、viewport 視口
三、**查詢 @media
4.**查詢語句運算子
四、斷點設定
五、響應式
伊桑·馬科特（ethan marcotte）在2023年首先提出了響應式網頁設計（rwd,responsive web design）這個術語。在他的一篇文章《responsive web design · an a list apart article》中他將已有的三種發開技巧（彈性，彈性網格布局，**與**查詢） 進行了整合，命名為響應式網頁設計。
那什麼才是真正的響應式設計？馬科特說，真正的響應式設計方法不僅僅是根據可視區域大小而改變網頁布局，而是要從整體上顛覆當前網頁的設計方法，是針對任意裝置的網頁內容進行完美布局的一種顯示機制。
畫素密度（pixels per inch），也稱ppi，即每英吋螢幕所擁有的畫素數，畫素密度越大，顯示畫面細節就越豐富。畫素密度=√/ 螢幕尺寸
iphone3g 165dpi 320px * 480px;
iphone4 326 dpi 640px * 960px
iphone6s 326dpi 1334px * 750px
用 iphone4 舉個例子，它有 326 dpi 顯示屏，根據上表，智慧型手機的典型**距離大概16.8英吋，基準畫素為 160 dpi。所以要顯示乙個 css 畫素，蘋果選擇將畫素比設定為2，所以看起來就和 163 dpi 手機中顯示的一樣了。裝置畫素比(dip或dpr) 同 ***x值描述
all用於所有裝置
aural
已廢棄。用於語音和聲音合成器
braille
已廢棄。 應用於盲文觸控式反饋裝置
embossed
已廢棄。 用於列印的盲人印刷裝置
handheld
已廢棄。 用於掌上裝置或更小的裝置，如pda和小型**
用於印表機和列印預覽
projection
已廢棄。 用於投影裝置
screen
用於電腦螢幕，平板電腦，智慧型手機等。
speech
應用於螢幕閱讀器等發聲裝置
tty已廢棄。 用於固定的字元網格，如電報、終端裝置和對字元有限制的便攜裝置
tv已廢棄。 用於電視和網路電視值描述
aspect-ratio
定義輸出裝置中的頁面可見區域寬度與高度的比率
color
定義輸出裝置每一組彩色原件的個數。如果不是彩色裝置，則值等於0
color-index
定義在輸出裝置的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0
device-aspect-ratio
定義輸出裝置的螢幕可見寬度與高度的比率。
device-height
定義輸出裝置的螢幕可見高度。
device-width
定義輸出裝置的螢幕可見寬度。
grid
用來查詢輸出裝置是否使用柵格或點陣。
height
定義輸出裝置中的頁面可見區域高度。
max-aspect-ratio
定義輸出裝置的螢幕可見寬度與高度的最大比率。
max-color
定義輸出裝置每一組彩色原件的最大個數。
max-color-index
定義在輸出裝置的彩色查詢表中的最大條目數。
max-device-aspect-ratio
定義輸出裝置的螢幕可見寬度與高度的最大比率。
max-device-height
定義輸出裝置的螢幕可見的最大高度。
max-device-width
定義輸出裝置的螢幕最大可見寬度。
max-height
定義輸出裝置中的頁面最大可見區域高度。
max-monochrome
定義在乙個單色框架緩衝區中每畫素包含的最大單色原件個數。
max-resolution
定義裝置的最大解析度。
max-width
定義輸出裝置中的頁面最大可見區域寬度。
min-aspect-ratio
定義輸出裝置中的頁面可見區域寬度與高度的最小比率。
min-color
定義輸出裝置每一組彩色原件的最小個數。
min-color-index
定義在輸出裝置的彩色查詢表中的最小條目數。
min-device-aspect-ratio
定義輸出裝置的螢幕可見寬度與高度的最小比率。
min-device-width
定義輸出裝置的螢幕最小可見寬度。
min-device-height
定義輸出裝置的螢幕的最小可見高度。
min-height
定義輸出裝置中的頁面最小可見區域高度。
min-monochrome
定義在乙個單色框架緩衝區中每畫素包含的最小單色原件個數
min-resolution
定義裝置的最小解析度。
min-width
定義輸出裝置中的頁面最小可見區域寬度。
monochrome
定義在乙個單色框架緩衝區中每畫素包含的單色原件個數。如果不是單色裝置，則值等於0
orientation
定義輸出裝置中的頁面可見區域高度是否大於或等於寬度。
resolution
定義裝置的解析度。如：96dpi, 300dpi, 118dpcm
scan
定義電視類裝置的掃瞄工序。
width
定義輸出裝置中的頁面可見區域寬度。
用法一
rel=
"stylesheet"
media
="mediatype"
href
="mystylesheet.css"
>
rel=
"stylesheet"
media
="mediatype and (media feature)"
href
="mystylesheet.css"
>
@import url(css檔案) mediatype@media mediatype and (media feature)
@media
(media feature)
四個斷點： 576px 768px 992px 1200px
兩個斷點： 640px 1024px
"響應式">
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...