发表于: 2017-03-04 00:14:16
1 1327
今日完成:
修改了中关村互联网教育项目的javaee+大数据页面。
1.banner图。
2.IT行业分析图。
3.荣誉模块。
4.课程介绍模块。
5.复盘项目模块。
2.完了首页副业-关于我们
2.今天听龚浩讲了【CSS-task10】如何使用媒体查
明日计划:
完成中关村互联网教育项目名师团队页。
遇到的问题:
需求变更。资料不全。
今日收获:
完善了javaee+大数据页面。完成了关于我们页面。
再次熟悉了:
逻辑操作符
一个基本的媒体查询,即一个媒体属性与默认指定的 all媒体类型
@media (min-width: 700px) { ... }
and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型,只有当每个属性都为真时,结果才为真
@media and (max-width:600px) and (min-width: 800px;){......}
媒体查询中使用逗号分隔效果等同于 or 逻辑操作符。当使用逗号分隔的媒体查询时,如果任何一个媒体查询返回真,样式就是有效的。逗号分隔的列表中每个查询都是独立的,一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
not键字应用于整个媒体查询,在媒体查询为假时返回真,not关键字仅能应用于整个查询,而不能单独应用于一个独立的查询。
@media not all (max-width:700px){......}
媒体属性
width:浏览器可视宽度
height:浏览器可视高度
device-width:设备屏幕的宽度
device-height:设备屏幕的高度
orientation:检测设备目前处于横向还是纵向状态
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例
color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色)
color-index:检查设备颜色索引表中的颜色,他的值不能是负数
monochrome:检测单色楨缓冲区域中的每个像素的位数。
resolution:检测屏幕或打印机的分辨率
grid:检测输出的设备是网格的还是位图设备。
评论