发表于： 2017-03-16 23:20:54
1 654
今天完成的事情：学习响应式，媒体查询资料；在CSS3中可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表，这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制 作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。在task8中添加媒体查询感觉效果不错，几种页面中引入媒体类型方法：
1、link方法引入
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
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>
<style type="text/css">
@import url("css/style.css") all;
</style>
</head>
4、@media引入
这种引入方式和@imporr是一样的，也有两种方式：
样式文件中使用：
@media screen{
选择器{
属性：属性值；
}
}
在<head>>/head>中的<style>...</style>中调用：
<head>
<style type="text/css">
@media screen{
选择器{
属性：属性值；
}
}
</style>
例子；
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
转换成css中的写法为：
@media screen and (max-width: 600px) {
选择器 {
属性：属性值；
}
}
大概意思是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。
@media screen and (max-width: 600px) {
选择器 {
属性：属性值；
}
}
大括号中选择器； 属性：属性值；可以自己添加自己需要的样式
明天计划做的事情；布局task10；
收获；可以简单的应用媒体查询。
返回列表
评论