媒体查询
媒体查询的参数
- 1.width , height 浏览器可视宽度,高度(注意拉动的位置)
- 2.device-width 设备屏幕的宽度
- 3.device-height 设备屏幕的高度
尺寸的顺序
- 屏幕尺寸由小到大
- 代码开头由max-device-width --> (min and max) --> max
flex布局
- 1.flexiableBox 即是弹性盒子,用来进行弹性布局,可以配合rem处理尺寸的适配问题。
- 2.符合响应式的特点
- 主轴: 如果横向排列,x为主轴,y为交叉轴,纵向反之。
- 交叉轴:如上。
flex-direction 方向设定
- 1.row 默认值,按左到右横向显示
- 2.row-reverse , 由右向左
- 3.column , 垂直显示,由上到下
- 4.column-reverse , 由下到上
flex-wrap 是否换行
- 1.nowrap 默认值,不换行,不换列
- 2.wrap 换行换列
- 3.wrap-reverse 换行或换列,但以相反顺序。
flex-flow 简写模式 表示排序,换行。
justify-content 处理剩余空间,间距
- 1.flex-start 从左到右挨着
- 2.flex-end 从右到左挨着
- 3.center 居中显示
- 4.space-between 平均分布,两边不留间隔空间。
- 5.space-around 平均分布,两边留有一半间隔空间
align-items 设置每个flex元素在交叉轴上的默认对齐方式,实现子元素上中下。
- 1.flex-start 位于容器开头
- 2.flex-end 位于容器结尾
- 1.center 居中
其他属性,设置子对象
- 1.flex-basis 设置弹性盒模型伸缩基准值。
- 2.flex-grow 设置弹性盒子的扩展比率
- 3.flex-shrink 设置弹性盒子的缩小比率
- 4.flex 以上三种的所需。
- 特殊写法及含义
- 1.flex:auto 作用flex:1 1 auto
- 2.flex:none 作用flex:0 0 auto
- 3.flex:0% 作用flex:1 1 0%
- 4.flex:100px 作用flex:1 1 100px
- 5.flex:1 作用flex:1 1 0%
rem的使用方法
em 有继承关系干扰。
体验媒体查询代码:
<style>
#div0 {
width: 100px;
height: 200px;
background-color: aqua;
}
@media screen and (min-device-width: 200px) and (max-device-width: 300px) {
#div0 {
background-color: red;
}
}
@media screen and (min-device-width: 301px) and (max-device-width: 500px) {
#div0 {
background-color: blue;
}
}
</style>
媒体查询参数设置
<style>
#div0 {
width: 100px;
height: 200px;
background-color: aqua;
}
@media screen and (min-width: 200px) and (max-width: 700px) {
#div0 {
background-color: red;
}
}
@media screen and (min-width: 701px) {
#div0 {
background-color: blue;
}
}
</style>
案例分享,三行显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div0 {
width: 100%;
}
#div0 div {
float: left;
height: 50px;
}
#div0 div:nth-child(1){
background-color: red;
}
#div0 div:nth-child(2){
background-color: green;
}
#div0 div:nth-child(3){
background-color: blue;
}
@media screen and (max-device-width: 768px) {
#div0 div {
width: 100%;
}
}
@media screen and (min-device-width: 769px) and (max-device-width:800px) {
#div0 div {
width: 50%;
}
}
@media screen and (min-device-width: 801px){
#div0 div {
width: 33%;
}
}
</style>
</head>
<body>
<div id="div0">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
媒体查询外部样式引用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/css1.css" media="(max-device-width: 768px)">
<link rel="stylesheet" href="./css/css2.css"
media="(min-device-width: 769px) and (max-device-width:800px)">
<link rel="stylesheet" href="./css/css3.css"
media="(min-device-width: 801px)">
<style>
#div0 {
width: 100%;
}
#div0 div {
float: left;
height: 50px;
}
#div0 div:nth-child(1){
background-color: red;
}
#div0 div:nth-child(2){
background-color: green;
}
#div0 div:nth-child(3){
background-color: blue;
}
</style>
</head>
<body>
<div id="div0">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
flex布局演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#a{
display: flex;
width: 500px;
flex-wrap: wrap;
}
#a div{
width: 200px;
height: 50px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="a">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
flex 属性设置含有计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#a{
display: flex;
width: 400px;
height: 500px;
background-color: darkgray;
}
#a div{
width: 120px;
height: 50px;
border: 1px solid #000;
background-color: aquamarine;
}
#a div:nth-child(1){
flex-basis: 10px;
flex-grow: 1;
background-color: bisque;
}
#a div:nth-child(2){
flex-basis: 50px;
flex-grow: 1;
flex-shrink: 0;
}
</style>
</head>
<body>
<div id="a">
<div>1</div>
<div>2</div>
</div>
</body>
</html>
rem尺寸的使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var c=()=>{
let w = document.documentElement.clientWidth
let n = (20*(w/768)>40?40+'px':((20*(w/768))+ 'px'))
document.documentElement.style.fontSize = n
}
window.addEventListener('load',c)
window.addEventListener('resize',c)
</script>
<style>
html{
}
div{
font-size: 1rem;
}
</style>
</head>
<body>
<div>123</div>
</body>
</html>
页面自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var redirect = () => {
let userAgent = navigator.userAgent.toLocaleLowerCase()
console.log(userAgent)
let device = /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/
if(device.test(userAgent)){
window.location.href = './html/pad.html'
}else{
window.location.href = './html/pc.html'
}
}
redirect()
</script>
</head>
<body>
</body>
</html>
响应式布局案例代码
html代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0", user-scalale="0">
<title>Document</title>
<link rel="stylesheet" href="./css/small.css" media="(max-device-width:800px)">
<link rel="stylesheet" href="./css/big.css" media="(min-device-width: 801px)">
</head>
<body>
<div id="layout">
<div id="top"></div>
<div id="main">
<div>
<li>分类1</li>
<li>分类2</li>
<li>分类3</li>
<li>分类4</li>
<li>分类5</li>
<li>分类6</li>
</div>
<div>
<li>图片1</li>
<li>图片2</li>
<li>图片3</li>
<li>图片4</li>
<li>图片5</li>
<li>图片6</li>
<li>图片7</li>
<li>图片8</li>
</div>
</div>
</div>
</body>
</html>
CSS代码部分
big.css
*{
margin: 0px;
padding: 0px;
background-color: #f5f5f5;
}
#layout{
display: flex;
flex-direction: column;
width: 80%;
margin: 0 auto;
}
#top{
width: 100%;
margin: 0 auto;
background-color: yellow;
flex: 0 0 50px;
}
#main{
flex: 0 0 100%;
display: flex;
flex-direction: row;
}
#main div:nth-child(1){
flex: 0 0 30%;
background-color: #f5f5f5;
list-style-type: none;
display: flex;
flex-wrap: wrap;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#main div:first-child li{
flex: 0 0 100%;
height: 40px;
list-style: 40px;
text-align: center;
border-bottom: 1px solid #dedede;
}
#main div:nth-child(2){
flex: 0 0 70%;
background-color: #f5f5f5;
list-style-type: none;
display: flex;
flex-wrap: wrap;
justify-content:space-around;
border-right: 1px solid #000;
}
#main div:nth-child(2) li{
flex: 0 0 15%;
height: 120px;
list-style: 40px;
text-align: center;
border: 1px solid #000;
background-color: yellow;
margin-top: 10px;
}