发表于： 2019-11-19 23:17:01
1 462
一、今天完成的事情
1.媒体查询
媒体查询就是可以根据设备显示器的特性（视口宽度、屏幕比例、设备方向-横向或者竖向等）为其设定CSS样式，属于响应式布局。
看下面的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: yellow;
}
@media screen and (min-width: 500px) {
div{
width: 200px;
height: 200px;
background: #1b6d85;
}
}
@media screen and (min-width: 800px) {
div{
width: 300px;
height: 300px;
background: red;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
当页面尺寸大于800px的时候，div的颜色就是red，
当页面尺寸大于800px的时候，div的颜色就是#1b6d85，
当页面尺寸大于800px的时候，div的颜色就是yellow.
2.布局容器
<div>
.container 类用于固定宽度并支持响应式布局的容器。
</div>
<div>
.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
</div>
3.栅格系统(系统会自动分为最多12列)
1.创建栅格系统的容器
# 每一行row包含在一个容器container中
<div>
<div>
...
</div>
</div>
2.创建合适的栅格系统
<div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
</div>
<div>
<div>.col-md-8</div>
<div>.col-md-4</div>
</div>
<div>
<div>.col-md-4</div>
<div>.col-md-4</div>
<div>.col-md-4</div>
</div>
<div>
<div>.col-md-6</div>
<div>.col-md-6</div>
</div>
# 每个row代表一行(12份)
# col-md-数字”中的“数字”从1-12中取，数字等于几，就占几份；
除了col-md-数字之外还有其他的几种：
.c0l-xs- 无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；试用于手机；
.col-sm- 屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；试用于平板；
.col-md- 屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；试用于桌面显示器；
.col-lg- 屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器；
例子如下：
<div>
<div>
<div class="col-xs-12 col-sm-6 col-md-8">屏幕分别为3种情况的时候，分别占每行的几份</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>
4.排版
HTML 中的所有标题标签，<h1> 到 <h6>均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<span>我是p标签的h1标签</span><br/><br/>
<span>我是p标签的h2标签</span><br/><br/>
<span>我是p标签的h3标签</span><br/><br/>
<span>我是p标签的h4标签</span><br/><br/>
<span>我是p标签的h5标签</span><br/><br/>
<span>我是p标签的h6标签</span><br/><br/>
二、遇到的困难
当自己在写代码的时候，怎么引入媒体查询。通过百度查到了
三、明天要做的事情
任务八的第一页赶紧做完
四、收获
学到了媒体查询的方式方法。
返回列表
评论