CSS學習筆記 響應式布局

2021-09-08 11:17:45 字數 1432 閱讀 3169

響應式布局

響應式布局是現在很流行的乙個設計理念,隨著移動網際網路的盛

行,為解決如今各式各樣的瀏覽器解析度以及不同移動裝置的顯示效

,設計師提出了響應式布局的設計方案。所謂的響應式布局,就是

乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。

也就說乙個頁面可以在多個終端呈現出你想要的效果,能夠相容各個

終端。響應式布局的優缺點

優點:

面對不同解析度裝置靈活性強

能夠快捷解決多裝置顯示適應問題

根據不同的顯示器調整設計最適合使用者瀏覽習慣的頁面

缺點:

相容各種裝置工作量大,效率低下

**累贅,會出現隱藏無用的元素,載入時間加長

其實這是一種折衷性質的設計解決方案,多方面因素影響而達不到最佳效果

因為要適應不同的裝置,頁面的結構可能會有所不同,會導致頁面的辨識度不強

利用css3-media query實現響應式布局

1、media query:

通過不同的**型別和條件定義樣式表規則。**查詢讓css可以更精確作用於不同的**型別和同一**的不同條件

2、語法結構及用法

@media 裝置名 only (選取條件) not (選取條件) and (裝置選取條件),裝置二

(1)在link中使用@media:

(2)在樣式表中內嵌@media:

特殊裝置檢測

1.phone4

2.ipad

3.android

/*240px的寬度*/

/*360px的寬度*/

/*480px的寬度*/

css 響應式布局

響應式 型別 all所有 braille盲文觸覺裝置 embossed盲文印表機 print手持裝置 projection列印預覽 screen彩屏裝置 speech 聽覺 類似的 型別 tty不適用畫素的裝置 tv 電視 用法 media embossed 盲文印表機是綠色 box backgro...

CSS 響應式布局

學的太不仔細了,仰天默淚 media query 查詢 常見的屬性 基本語法 href link.css media only screen and max width 480px 先引入外部樣式表,media是css才有的屬性,只有在螢幕解析度小於或等於480px畫素的時候 才會這個外聯樣式才有效...

css 響應式布局

一.使用html中的viewport來實現 viewport語法如下 html 1 width 控制 viewport 的大小,可以指定的乙個值或者特殊的值,如 device width 為裝置的寬度 單位為縮放為 100 時的 css 的畫素 2 height 和 width 相對應,指定高度。3...