移动web开发---第四天

微金所

一、媒体查询

在响应式开发中使用媒体查询中的screen查询浏览器的宽度来定义不同宽度区间的样式和布局。

代码：

@media screen and (min-width: 768px){}

@media screen and (min-width: 992px){}

@media screen and (min-width: 1200px){}

或者

@media (max-width: 767px){}

@media (min-width: 768px) and (max-width: 991px){}

@media (min-width: 992px) and (max-width: 1199px){}

@media (min-width: 1200px){}

二、结构选择器

div a{}

div > a {}

div + div {} 选择目标元素的下一个元素

div ~ div {} 选择目标元素之后的所有同级元素

三、Bootstrap常用样式

1、container类

用于定义一个固定宽度且居中的版心

2、row类

每一个列默认有一个15px的左右外边距，row类的一个作用就是通过左右-15px屏蔽掉它

xs : 超小屏幕 手机 (<768px)

sm : 小屏幕 平板 (≥768px)

md : 中等屏幕 桌面显示器 (≥992px)

lg : 大屏幕 大桌面显示器 (≥1200px)

3、hidden 类

hidden-xs,hidden-sm,hidden-md,hidden-lg在不同的屏幕下隐藏。

4、text-* 类

 text-center 文本居中

 text-left 文本左对齐

 text-right 文本右对齐

5、pull-* 类

 pull-left 左浮动类

 pull-right 右浮动类

6、center-block 类

让一个固定宽度的元素居中。

7、display: table-cell

四、rem

相对长度单位，相对于html根元素font-size计算值得倍数

test布局  //白青衣/rem插件/rem/rem.css

flexible布局//白青衣/rem插件/flexible/rem.css

  淘宝这个方案可以在任意设计稿尺寸下使用（地址：https://github.com/amfe/lib-flexible）

  1）除font-size外，

       其它大小都根据750标注稿的尺寸，转换成rem单位的值，转换方法为：

       标注稿尺寸 / 标注稿基准字体大小；

 2）标注稿基准字体大小 = 标注稿宽度 / 10，

    如标注稿宽为750，标注稿基准字体大小为75；标注稿宽为640，标注稿基准字体大小为64；

em的大小是根据父元素的font-size来设置的

   rem的大小是根据html标签的font-size来设置的

标签属性

提供给屏幕阅读器的属性，我们可以忽略  

role、 aria-*、 class="sr-only"

指定插件类型，和控制的目标元素

data-toggle

data-target

a标签也可以通过href来指定被控制的目标元素

轮播图

1、自适应图片：

在pc端使用的是背景图片，在移动端使用的是图片

2、在写静态demo的时候使用的是响应式工具来完成的图片响应，但是会加载两种图片那么这时候就需要做图片的响应式了，首先我们准备了json 中有两种数据，然后ajax请求 到数据做缓存 如果请求过就直接取缓存的，然后通过模版引擎解析成html，最终把解析完成的html渲染在页面当中。

七、自定义字体：声明自定义字体的名字，引入字体文件，指定字体文件的格式

@font-face{

font-family: "wjs";

src: url(../fonts/MiFie-Web-Font.eot) format("embedded-opentype");

src: url(../fonts/MiFie-Web-Font.svg) format("svg");

src: url(../fonts/MiFie-Web-Font.ttf) format("truetype");

src: url(../fonts/MiFie-Web-Font.woff) format("woff");

}

wjs_icon{font-family: wjs; }

通过伪类来定义一个字体图标，字体图标设计出来的时候一般都会有文档参考

wjs_icon_phone:before{
content: "\e908";