color rect() 布局 編譯 idt npm logs var blog

一、rem 1、意義：當px固定寬度不能適應不同屏幕尺寸時，布局需要，從而產生rem 2、rem 和 em 區別 2.1 rem: root，以根節點（html）作為參照的尺寸 2.2 em: 根據父級font-size確定大小 1em = 1font-size（父級的 ） 3、隨著屏幕寬度的變化，改變HTML根元素font-size，從而控制rem值，從而達到相應效果（其他HTML子元素width等都是rem）

function autoRem(){
    var html = document.documentElement;     //
 
documentElement返回文檔根節點html
    var htmlWidth = html.getBoundingClientRect().width;     //getBoundingClientRect().width 包括width + padding * 2 + border * 2
    html.style.fontSize = htmlWidth / 16 + ‘px‘;     //16 是根據自己頁面設定，非固定使用，以方便後續計算為準（iPhone5中320屏幕，剛好可以整除，一個屏幕剛好16rem）
}
//從此，假設iPhone5測試，則html的font-size = 320 / 60 = 20px     則 1rem = 20px
 

二、使用LESS計算rem 1、less使用方法： 1.1 安裝less運行環境（less是css預編譯器，但是瀏覽器等沒有其編譯環境，需要將其編譯成css文件，從而間接使用css） 1.1.1 npm install -g less 詳見less中文網： http://lesscss.cn/ 1.2 完成less環境安裝之後在本地書寫需要的less文件，比如style.less 1.3 打開命令窗口，切換到less文件所在文件夾，編譯less成相應css文件 lessc style.less style.css (lessc less文件名 css文件名) 2、利用less計算能力，計算rem

@r: 10rem;
.main{
    width: 
 
[email protected];     //400px---->40rem
}

三、利用border-sizing布局 1、量尺寸時，width包含住border等，然後正常設置border 2、border-sizing: border-box; //讓border在width範圍內繪制（content包含了width + padding + border） 下章續。。。

02移動端布局