-
计算尺寸。。
查看全部 -
字体单位：值根据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原理与简介
查看全部
举报