《黑马程序员：前端阶段笔记之移动Web开发第四天》由会员分享，可在线阅读，更多相关《黑马程序员：前端阶段笔记之移动Web开发第四天（3页珍藏版）》请在金锄头文库上搜索。
1、黑马程序员郑州中心 编著黑马程序员：前端阶段笔记之移动 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)
2、and (max-width: 1199px)media (min-width: 1200px)二、结构选择器div adiv a div + div 选择目标元素的下一个元素div div 选择目标元素之后的所有同级元素三、Bootstrap 常用样式1、container 类 用于定义一个固定宽度且居中的版心 2、row 类 每一个列默认有一个 15px 的左右外边距，row 类的一个作用就是通过左右-15px 屏蔽掉它xs : 超小屏幕 手机 (768px) sm : 小屏幕 平板 (768px) md : 中等屏幕 桌面显示器 (992px) lg : 大屏幕 大桌面显示器 (1200
3、px) 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.cssflexib
4、le 布局/白青衣/rem 插件/flexible/rem.css淘宝这个方案可以在任意设计稿尺寸下使用（地址：https:/ font-size 外，其它大小都根据 750 标注稿的尺寸，转换成 rem 单位的值，转换方法为：标注稿尺寸 / 标注稿基准字体大小；2）标注稿基准字体大小 = 标注稿宽度 / 10，如标注稿宽为 750，标注稿基准字体大小为 75；标注稿宽为 640，标注稿基准字体大小为 64；em 的大小是根据父元素的 font-size 来设置的rem 的大小是根据 html 标签的 font-size 来设置的标签属性提供给屏幕阅读器的属性，我们可以忽略 role、 ari
5、a-*、 class=“sr-only“指定插件类型，和控制的目标元素data-toggledata-targeta 标签也可以通过 href 来指定被控制的目标元素轮播图1、自适应图片：在 pc 端使用的是背景图片，在移动端使用的是图片2、在写静态 demo 的时候使用的是响应式工具来完成的图片响应，但是会加载两种图片那么这时候就需要做图片的响应式了，首先我们准备了 json 中有两种数据，然后ajax 请求到数据做缓存 如果请求过就直接取缓存的，然后通过模版引擎解析成html，最终把解析完成的 html 渲染在页面当中。七、自定义字体：声明自定义字体的名字，引入字体文件，指定字体文件的格式
6、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_iconfont-family: wjs; 通过伪类来定义一个字体图标，字体图标设计出来的时候一般都会有文档参考wjs_icon_phone:beforecontent: “e908“;
