2018-05-19

一、sass

1.“CSS预处理器”,让CSS像其它程序语言一样可以做一些预定的处理,为CSS增加一些编程的特性。

2.!default设置默认值,而覆盖则是再其之前再次声明该变量
使用:
例如把padding的值从2px改成5px

$ingStylePadding: 5px;

//导入imgstyle.scss
@import 'imgstyle' ;

编译成css后

img-border {
border: 1px solid  #ccc ;
padding: 5px;
}

这种情况使用默认值,可以让我们在不对.scss源文件进行修改,而对我们要修改的地方进行了修改,同时不会产生重复的代码

3.@mixin可以实现大段样式的重用

4.可以对选择器进行嵌套使用

5.sass的逻辑:如@if、@while、@each、@for

二、移动端的适配

visual viewport 可见视口 屏幕宽度
layout viewport 布局视口 DOM宽度
ideal viewport 理想适口:使布局视口就是可见视口
设备宽度(visual viewport)与DOM宽度(layout viewport), scale的关系为:

(visual viewport)= (layout viewport)* scale
获取屏幕宽度(visual viewport)的尺寸:window. innerWidth/Height。
获取DOM宽度(layout viewport)的尺寸:document. documentElement. clientWidth/Height。

eg.

 

设置理想视口:把默认的layout viewport的宽度设为移动设备的屏幕宽度,得到理想视口(ideal viewport)
width=device-width 这句代码可以把布局视口设置成为浏览器(屏幕)的宽度
user-scalable=no 禁止用户缩放
initial-scale=1 的意思是初始缩放的比例是1,起到了和width=device-width同样的效果
maximum-scale=1.0, minimum-scale=1.0最大最小的缩放级别

2.媒体查询@media
min-width、max-width对应的属性值就是响应式设计中的断点值
来解决自适问题

3.设配rem
适配原理:将px替换成rem,动态修改htmlfont-size
1 rem = 浏览器默认的字体大小

4.Flexible布局
相对单位rem基准值公式:
rem=document.documentElement.clientWidth*dpr/10
将视觉稿分成100份,每份被称为一个单位a
1rem被认为10a
Flexible会将实际视口宽度除以10,并将这个值设置为根元素html的font-size值。
由此可以推出:对于采用标准iPhone 6750×1334视觉稿来说
1a = 7.5px 1rem = 75px
基于这个计算结果,我们就能将1:1标注稿的px数值除以75转换成rem数值,再套用到CSS中。

三、bootstrap

了解bootstrap CSS和bootstrap布局组件
着重看了下列排序、表格表单、网格系统、图像等。
它的实现很简单,在便签上加上类名

四、demo

就是跟着一些实例敲,再看效果没实现的地方、找对应的代码
去实现它,或者看源码(它的原理实现),

进度貌似还是慢了,还会加快脚步的

你可能感兴趣的:(2018-05-19)