less在瀏覽器直接使用以及rem布局

注釋

變數

@ly_width:100px;

.box

.box

混合

@ly_width:100px;

@ly_height:200px;
@ly_color:green;
.border 
.one

@ly_width:100px;

@ly_height:200px;
@ly_color:green;
.border 
.one

@ly_width:100px;

@ly_height:200px;
@ly_color:green;
.border(@border_width) 
.one

.one

帶引數的混合---帶預設值 (可以傳多個引數 下面以乙個引數為例)

@ly_width:100px;

@ly_height:200px;
@ly_color:green;
.border(@border_width:3px;) 
.one

.one

在解決css3相容性時候經常用到

.border_radius (@radius: 5px)

匹配模式

//定義上,下,左,右邊框的樣式

.border(top;@border_width:5px;@border_color:red)
.border(bottom;@border_width:5px;@border_color:red)
.border(left;@border_width:5px;@border_color:red)
.border(right;@border_width:5px;@border_color:red)
//如果想寫通用的樣式 可以在下面的**中寫 格式是固定的 
.border(@_,@border_width:5px;@border_color:red)
.border_use1 
.border_use2

.border_use1 

.border_use2

運算

@ly_width:100px;

.one

.one

巢狀

@ly_width:100px;

@ly_height:200px;
@ly_color:red;
.one 
}

.one 

.one .two

@arguments變數

//和前面提到的混合一起舉個栗子  

.border(@border_width;@border_style;@border_color)
.one

.one

​@charset"utf-8";

@color:red;
@fontsize:16px;
@classname:box;
/*注釋：在css中可以訪問*/
//注釋：在css中不支援，不會編譯在css檔案中
//變數以@字首
//js命名與js一樣
a //變數名拼接，使用方法:@(變數)
.@ ​

天下第一刀，蠻三刀天下第一刀，蠻三刀
天下第一刀，蠻三刀天下第一刀，蠻三刀天下第一刀，蠻三刀
天下第一刀，蠻三刀天下第一刀，蠻三刀天下第一刀，蠻三刀天下
第一刀，蠻三刀天下第一刀，蠻三刀天下第一刀，蠻三刀天下第一刀，
蠻三刀天下第一刀，蠻三刀天下第一刀，蠻三刀天下第一刀，蠻三刀
天下第一刀，蠻三刀天下第一刀，蠻三刀天下第一刀，蠻三刀天下第
一刀，蠻三刀天下第一刀，蠻三刀天下第一刀，蠻三刀

響應式布局  **查詢

伸縮布局   flex

共同點：只能做寬度的適配（排除，因為有寬高自適應）都不能對height進行百分比布局（等比縮放），只能給固定高度

rem布局----通過控制html上的文字大小去控制頁面上所有以rem為單位的基準值控制尺寸

吧頁面上所有px單位換為rem單位

怎麼換算？-------預設乙個基準值  方便計算   100px = 1rem

換算公式：當前的rem基準值= 預設基準值/設計稿的寬*當前螢幕的寬

怎麼去改變js換算 ， **查詢

裝置 320px 414px 640px

當前裝置對應的基準值=預設/預設對應的螢幕尺寸*當前螢幕尺寸

rem

瀏覽器端使用less

less無法在瀏覽器中直接使用，瀏覽器不能識別 less.js 外掛程式的原理是使用ajax，所以需要以http協議開啟檔案，而不是使用檔案協議 file 這裡使用php開啟乙個臨時的伺服器 引入less檔案，引入less.js外掛程式必須在引入less檔案的link標籤中加入type text l...

在瀏覽器中使用GitHub

步驟1.建立儲存庫 1.點選頭像旁邊的加號,建立新倉庫 2.輸入倉庫名 3.倉庫說明 4.公共開源 私有 別看不見 收費 綜上所訴 1.點選create new file建立新檔案 或者點選那個鉛筆 或者點選藍色readme.md後再點選鉛筆 2.開始編輯 3.預覽修改 4.編輯完 成後 專案說明 ...

在IE瀏覽器中如何直接顯示word文件

開始讀取 if myread.read true 直接開啟文件而不詢問的關鍵在於此句 裡面的inline,而如果將它修改為attachment,就一定會彈出對話方塊.另外,你還可以採用另乙個方法,即,先將word文件生成到硬碟上,然後以如下語句 response.redirect 此文件的位址 以這...