1.media scss rem自适应适配:
1.1:定义:根据不同屏幕尺寸动态改变页面样式;rem实质上是一个相对单位,我们做的时候只需根据设计稿做媒体查询,规定不同屏幕范围html字体大小,在实际元素尺寸上用实际尺寸/设计稿对应尺寸的html字体大小,得到相对大小,浏览器会*html字体大小得到实际尺寸;
例如:750px设计稿,划分15等分就是50px html字体大小就是750/15=50px,div宽度100px就是100rem/50=2rem,750就是15rem,div的宽度在任何尺寸下只占15份中的两份,所以在任何设定的屏幕尺寸下都能合理的展示
1.2:形式:@media all(所有媒体类型)/print(打印机)/screen(屏幕尺寸) and/not/only (width/min-width/max-width){}
1.3:在html文件直接引入外部样式:
1.rem相对于html字体大小,em相对于父元素字体大小,rem优点是通过改变根元素字体大小改变页面各元素尺寸
2.rem适配方案:
2.1:rem+媒体查询+less技术
例如设计稿750像素,要求页面15等分去设置字体大小,html字体大小就是750/15=50px,元素100px就可以写出100/50=2rem;
在320像素屏幕下15等份就是320/15=21.3px,100px就是100/21.33rem