-
計算尺寸。。
查看全部 -
字體單位：值根據html根元素大小而定，同樣可以作為寬度、高度等單位
適配原理：將px替換成rem，動態修改html的font-size適配
兼容性：ios6以上和android2.1以上，基本覆蓋所有流行的手機系統
瀏覽器的默認字體是16px，也就是說1rem=16px
通過媒體查詢設置html的font-size有缺點，頁面的變化是根據媒體查詢走的，沒有js動態設置的更加細致
通過js動態設置html的font-size
let htmlWidth=document.documentElement.clientWidth || document.body.clientWidth;//獲取視窗寬度
let htmlDom=document.getElementsByTagName('html')[0];
htmlDom.style.fontSize=htmlWidth/10+'px';//iphone6的寬度375除以10是37.5，與scss中function里面的$rem基準值一致
window.addEventListener('resize',(e)=>{
? let htmlWidth=document.documentElement.clientWidth || document.body.clientWidth;
? htmlDom.style.fontSize=htmlWidth/10+'px';
})
全局安裝node-sass：npm install node-sass -g
a.scss轉化成b.css：node-sass a.scss b.css
a.scss里面通過function自動把px計算成rem值
@function px2rem($px){
? $rem:37.5px;/*以iphone6的375為基準*/
? @return ($px/$rem)+rem;
}
.hello{
? width:px2rem(100px);height:px2rem(100px);font-size:px2rem(18px);
}
字號，寬高，margin，padding等，只要是用到px的地方，都可以寫成rem
查看全部 -
最后一個函數，自動適配，動態取值設定，有點模糊，后面再看看具體資料
查看全部 -
news-item 本來設置了100% 但是由于設置了左右的 padding 所以，整體
寬度超過了100% ，所以會出現左右滾動條效果，這里為了不出現滾動條
，就需要強制下，用 box-sizing: border-box;?查看全部 -
18行的?&：寫法和?24行的單獨寫法，是等同的！ 18行的??nth-child(2)?表示?header-itme?的第二個?元素?單獨設置下CSS
查看全部 -
JS?動態控制頁面的?fontsize?大小
這里的 let 相當于 var?
如截圖所示：頁面的 fontsize 大小是 當前視窗寬度的 十分之一 PX
查看全部 -
媒體查詢，多條件寫法，看截圖
查看全部 -
如果把HTML?默認字體大小改為：17px;? BOX?寬度設置為?10rem?就等于?10*17=170px
總結：頁面默認的默認的字體大小，如果用 rem 做單位講的話，所有默認都是 1rem ，但是 1rem 到底等于多少 px ，這個可以根據 html css 對 font-size: ?px; 來初始化設定
如果不設定，頁面默認的字體大小是 16px ，詳細請見上一條筆記
查看全部 -
瀏覽器默認的字體大小就是?1rem?，也就是等同于?16px
查看全部 -
web?移動端獨有的?viewport?屬性，看圖
查看全部 -
4個DIV 的 CLASS 名都是 inner 要給這4個 DIV 不同的底色顯示，用CSS 控制如圖所視
查看全部 -
2處媒體查詢，第一個實現了 320以及320以下 屏幕下的CSS 樣式；第二個實現了 320像素寬以上屏幕的CSS 樣式
查看全部 -
@media 這里和 LINK 哪里（2種寫法）：只有在屏幕寬度小于等于320px的時候，里面的CSS 才生效
查看全部 -
display:inline-block?屬性讓DIV可以橫著排（DIV?默認對是豎著一個個的排）
查看全部 -
rem原理與簡介
查看全部
舉報