響應式筆記（1）

一、**查詢：**查詢可以讓我們根據裝置顯示器的特性（如視口寬度、螢幕比例、裝置方向：橫向或縱向）為其設定css樣式，**查詢由**型別和乙個或多個檢測**特性的條件表示式組成。

語法

1

@media mediatype and|not|only (media feature) 

1

@media screen and (max-width: 300px) 
5}

not只到逗號位置有效

only 老舊瀏覽器解析到@media all/scree/print為止，後面的條件會被忽略，當針對某個裝置應用**查詢時，最好帶上only

**屬性最常用的4個，可新增min-或max-字首

1.width：視口寬度

2.height：視口高度

3.device-width：渲染表面的寬度，就是裝置螢幕的寬度

4.device-height：渲染表面的高度，就是裝置螢幕的高度

二、視口（viewport）

舉例：書的布局視口，手機像放大鏡可以放大書的區域性，手機螢幕就是可視視口

理想視口使用方法：

<

meta 
name
="viewport"
content
="width=device-width"
>

1、漸進增強和優雅降級

漸進增強 progressive enhancement ：先簡單效果，再根據不同瀏覽器不同解析度逐漸追加效果

優雅降級 greceful degradation ：先做到優雅的效果，在根據不同瀏覽器不同分辯率逐漸減少效果。

優雅降級更好，針對使用者體驗來說，思想是讓老瀏覽器可以用，新的瀏覽器體驗更好

2、根據使用者使用比例來確定大小螢幕實現順序

3、斷點的選擇

Vuejs的學習筆記1 響應式原理

vuejs採用的基於依賴收集的觀測機制 1 將原生的資料改造成可觀測物件，乙個可觀測的物件可以被取值，也可以被賦值 2 在watcher的求值過程中，每乙個被取值的可觀測物件都會將當前的watcher註冊為自己的乙個訂閱者，並成為當前watcher的乙個依賴。3 當乙個被依賴的可觀察物件被賦值時，它...

vue的響應式1

div const vm newvue vm.mrdeng 手如柔荑 膚如凝脂 見證奇蹟的時刻，頁面變化啦為了防止名稱衝突。因為會將data中資料 給vue，假如說我們自己寫的data名稱和vue中自帶的屬性衝突了，那麼就會覆蓋vue內部的屬性，所以vue會把自己內部的屬性成員名稱前加上 或 如果加...

響應式開發學習筆記

media 型別 and 特性 max width 是 特性中最常用的乙個特性，其意思是指 型別小於或等於指定的寬度時，樣式生效。如 media screen and max width 480px 上面表示的是 當螢幕小於或等於480px時,頁面中的廣告區塊 ads 都將被隱藏。min width...