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.

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 

设置理想视口:把默认的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

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,710评论 4 376
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,839评论 2 308
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 112,295评论 0 255
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,776评论 0 223
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,198评论 3 297
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,074评论 1 226
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,200评论 2 322
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,986评论 0 214
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,733评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,877评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,348评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,675评论 3 265
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,393评论 3 246
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,209评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,996评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,212评论 2 287
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 36,003评论 2 280

推荐阅读更多精彩内容

  • 移动前端开发之viewport的深入理解 一、viewport的概念 通俗的讲,移动设备上的viewport就是设...
    明明三省阅读 15,484评论 1 46
  • 原文地址 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewp...
    matthewm阅读 1,543评论 0 4
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,635评论 1 92
  • 开发移动网页时,你一定会遇到下面这段代码: 在网页的 中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。其...
    gzgogo阅读 2,239评论 4 16
  • 这里有着一个黑色画面,高架楼梯悬挂在封面直至头脑深处。蜗耳悬挂着高框黑镜,另一面,你能看到黑白双眼的犀利,一面冷静...
    苏宇城阅读 2,043评论 24 35