[成都|]JS-|2018年12月03日的日报-技能树.IT修真院

发表于： 2018-12-03 21:26:52

1 810

今天完成的事情：

媒体查询

一、媒体类型(Media Type)

1、link方法引入

2、xml方式引入

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css"？>

3、@import方式引入

@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在<head></head>中的<style>...</style>中引入，单这种使用方法在 ie6-7都不被支持如样式文件中调用另一个样式文件

@import url("css/reset.css") screen;

@import url("css/print.css") print;

在<head></head>中的<style>...</style>中调用：

<head>

@import url("css/style.css") all;

</style>

</head>

4、@media引入

这种引入方式也有两种方式：

样式文件中使用：

@media screen{ 选择器{属性：属性值；} }

在<head></head>中的<style>...</style>中调用：

<head>

@media screen{ 选择器{属性：属性值；} }

</style>

</head>

二、媒体特性（Media Query）

转换成css中的写法为：@media screen and (max-width: 600px) { 选择器 {属性：属性值；} }

Media query和css的属性集合很相似，主要区别在：
1、Media query只接受单个的逻辑表达式作为其值，或者没有值；
2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；
3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况
4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种

Media Query还可以多个使用，用and链接。

明天的计划：

任务八

遇到的困难：

响应式的话是不是就会写几个样式，是分开写吗？

关键字几个还没怎么看not，only，and

用哪种引入好啊，看到好像说法不一

收获：

综上所述