A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 我是楠楠 黑马粉丝团   /  2018-1-17 10:54  /  1805 人查看  /  1 人回复  /   3 人收藏 转载请遵从CC协议 禁止商业使用本文

【郑州校区】移动web开发笔记day4

微金所一、媒体查询
在响应式开发中使用媒体查询中的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";
更多
【郑州校区】移动web开发笔记day3

传智播客·黑马程序员郑州校区地址
河南省郑州市 高新区长椿路11号大学科技园(西区)东门8号楼三层
联系电话 0371-56061160/61/62
来校路线  地铁一号线梧桐街站A口出


1 个回复

倒序浏览
已收藏
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马