好好學習，天天向上
主要內容為：rem、**查詢、less的原理理解，抽風式更新
*
html
.box
.box p
值解釋說明
all用於所有裝置
用於印表機和列印預覽
screen
用於電腦螢幕，平板電腦，智慧型手機等
關鍵字將**型別或多個**特性連線到一起作為**查詢的條件
每種**型別都具有各自不同的，根據不同的**型別的**特性設定不同的戰士風格
值解釋說明
width
定義輸出裝置中頁面可見區域的寬度
min-width
定義輸出裝置中頁面最小可見區域寬度
max-width
定義輸出裝置中頁面最大可見區域寬度
/* m**查詢：@media **型別 關鍵字 **特性 */
/* 在螢幕裝置中，判斷螢幕尺寸大等於 800px 的時候，最小寬度是 800px */
@media screen and (min-width: 800px)
}/* **查詢可以寫多個 */
@media screen and (max-width:600px)
}
*
/* rem 單位 */
/* 預設的 html 字型大小 */
html
/* p螢幕小於 640px 是，讓 html 的字型大小為20px，大於等於 640px html 字型大小為30px */
/* @media screen and (max-width: 639px)
} */
@media screen and (min-width: 640px)
} .box
rem + **查詢 + less 技術
裝置常見寬度
iphone4.5
640px
iphone 678
750px
android
常見 320px、480px、540px、600px、720px、768px、800px、1080px
目前常見市場主流裝置尺寸按照 1080px 設計
一般情況下，我們以一套或兩套效果圖石適應大部分的螢幕，放棄極端屏或對其優雅降級，犧牲一些效果，現在基本以 750 為準
動態設定 html 標籤 font-size 大小
比如以 750 為標準設計稿
/* **查詢設定不同螢幕下的 html 的字型大小 */
/* 設計圖參考 750px */
/* 將螢幕寬度劃分為 15份 */
/* 字型大小 = 螢幕寬度 / 15 */
@media screen and (min-width: 320px)
}@media screen and (min-width: 750px)
}/* 設定頁面中元素大小時，參考 750px 螢幕的字型大小 */
/* 寬高為 100*100 px 的盒子 */
.box
less 中文**：
less 中文網lesscss.cn
常見的 css 預處理器：sass、less、stylus
首先新建乙個字尾名為.less 的檔案，在這個檔案裡書寫 less 語句
變數名命名規範
變數使用規範
/*直接使用*/
body
a:hover
#header .logo#header
}
a:hover
a }
// less 運算
@basefont: 50px;
html
div
// div
// 1、參與運算的兩個數字，可以乙個有單位，乙個沒有單位，最終單位就是唯一的那個單位
// 2、參與運算的兩個數字，兩個都有單位，最終單位取第乙個數字的單位
// 3、less的運算子中間左右必須加空格隔開
移動Web開發 rem布局 less
rem單位 rem root em 是乙個相對單位，是相對於html元素的字型大小 media可以針對不同的螢幕尺寸設定不同的樣式 media mediatype and 1.查詢型別 2.關鍵字 3.特性 4.查詢書寫規則 為了防止混亂，查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡...
獲取元素的直接的子元素childen
api的使用場景 我們獲取目標元素的直接子元素。關於zyc.dom.g請看這裡 注意 1 思路主要還是迴圈 從目標元素的firstchild開始，直到本身和nextsibling一樣的時候停止迴圈，返回乙個陣列 2 nodetype的判斷 元素1 children get the children ...
移動WEB開發的rem布局 Less的使用
能夠使用rem單位 能夠使用 查詢的基本語法 能夠使用less的基本語法 能夠使用less中的巢狀 能夠使用less中的運算 能夠使用2種rem適配方案 思考 1 頁面布局文字能夠隨著螢幕大小的變化而變化？2 流式布局和flex布局主要針對於寬度布局，那高度如何設定？3 怎麼樣讓螢幕發生變化的時候元...