meta视口
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale1.0,maximum-scale=1.0,minimum-scale=1.0"> 1.0就是不缩放
背景缩放
/* 背景缩放*/
/* 只写一个参数，就代表宽度，高度省略，会等比例缩放 */
/* 可以跟50%，相对于父盒子 */
background-size: 500px 200px;
/* cover会完全覆盖盒子，超出的部分隐藏 */
background-size: cover;
/* contain高度和宽度等比例拉伸，当宽度或高度铺满div盒子就不再进行拉伸啦 */
background-size: contain;
倍图
图片倍图
- 首先需求是一个50*50的盒子
- 但是由于在移动端会被放大两倍，所以，准备一个100*100的图片
- 然后设置width:50 hight:50，放入这个盒子中
- 再进行放大的话，还是原来的100*100的图片，并不影响清晰度
背景倍图
- 首先需求是一个50*50的盒子
- 但是由于在移动端会被放大两倍，所以，准备一个100*100的图片
- 然后设置背景缩放，放入这个盒子中
- 再进行放大的话，还是原来的100*100的图片，并不影响清晰
二倍精灵图做法
- 在ps中把精灵图等比例缩放为原来的一半
- 然后测量大小和坐标，并写上
- 在代码里面写background-size: 200px auto 即水平是200px,垂直不写（精灵图原来宽度的一半，高度等比例缩放）
特殊样式举例
/* 手机链接清楚点击高亮，设置为透明 */
-webkit-tab-highlight-color:transparent
禁用长按页面时弹出菜单
img,a{-webkit-touch-callout:none;}
移动端常见布局
移动端布局可以分为两大类
单独制作移动端页面（主流）
- 流式布局（百分比布局）(常用）
- flex弹性布局（推荐）
- less+rem+媒体查询布局
- 混合布局
响应式页面兼容移动端
- 媒体查询
- bootstap
流失布局（百分比布局）
- 流式布局也就是非固定像素布局
- 通过盒子（一般是对父盒子进行设置）的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
- max-width 最大宽度 max-height最大高度
<!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,user-scalable=no,initial-scale1.0,maximum-scale=1.0,minimum-scale=1.0">
<title>流式布局</title>
<style>
*{
margin: 0;
padding: 0;
}
section{
width: 100%;
/* max-width: 980px; */
}
section div{
float: left;
height: 400px;
}
section div:nth-child(1){
width: 40%;
background-color: rgb(223, 0, 0);
}
section div:nth-child(2){
width: 60%;
background-color: rgb(38, 125, 224);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>
结果演示
flex弹性布局（推荐）
用来为盒子模型提供最大的灵活性，任何一个容器都可以使用。
特点：
- 当父盒子设置为flex布局后，子元素的float、clear和vertical-align属性将失效
- 子容器可以横向排列也可以纵向排列
就是通过给父盒子添加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>flex弹性布局</title>
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: aqua;
justify-content: space-around;
}
div span{
width: 150px;
height: 100px;
background-color: blue;
margin-right: 5px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
结果演示
常见父元素属性
flex-direction设置主轴的方向
也可以成为行和列，即项目的排列方向
- x轴即水平向右
- y轴即水平向右
- 主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，子元素是根据主轴来排列的
justify-content设置主轴上的子元素排列方式
使用这个属性之前一定要确定好主轴是哪个
flex-wrap设置子元素是否换行
- 默认是不换行的，只是通过自动缩小再放入父元素里面的
- flex-wrap:wrap 换行
设置水平垂直居中
设置主轴(默认x轴）水平居中 justify-content: center; align-items: center;
align-items设置侧轴上子元素排列方式（单行）
该属性是控制子项在侧轴（默认是Y轴）上的排列方式，在子项为单项（单行）的时候使用
align-content这是侧轴上子元素的排列方式（多行）
该属性只能用于子项出现换行的情况（多行），在单行下是没有效果的，结合上节说的flex-wrap:wrap 换行使用
flex布局子项常见属性
flex属性
定义子项目分配剩余空间，用flex来表示占多少份数
order:n 可以进行双飞翼（即设置显示位置）
左侧右侧固定，中间自适应测试：
<!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>分配空间</title>
<style>
div{
display: flex;
margin: 0 auto;
width: 80%;
height: 100px;
background-color: aqua;
}
div span:nth-child(1){
width: 150px;
height: 100px;
background-color: blue;
}
div span:nth-child(2){
flex: 1;占一份
background-color: rgb(4, 255, 4);
}
div span:nth-child(3){
width: 150px;
height: 100px;
background-color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
结果演示
align-self控制（单个或多个）子项自己在侧轴上的排列方式
<!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>控制单个子项</title>
<style>
div{
display: flex;
margin: 0 auto;
width: 80%;
height: 100px;
}
div span:nth-child(1){
width: 150px;
height: 100px;
background-color: blue;
}
div span:nth-child(2){
flex: 1;
background-color: rgb(4, 255, 4);
align-self: flex-end;
}
div span:nth-child(3){
width: 150px;
height: 100px;
background-color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
结果演示
grid布局
基本概念里的属性解释,在下文中会有衔接.理解属性解释,才能更好的理解下文各个内容.
其中每一个grid布局都有隐藏的网格线:
其中上边的网格线(单元格)可以用以下代码实现,但是没有效果,只是定位用的.
/* [c1]代表第一条线 */ grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
容器属性 grid-template-*
想要多少行或者列,就填写相应属性值的个数,不填写,就自动分配.
单写行或者列,另外者没有写,会自适应大小充满盒子(比如只写了行,没有写列)
- fr表示比例关系,即按比例平分盒子.
- minmax() 函数产生一个长度范围,表示长度只能在这个范围中,参数为最小值和最大值.在盒子没有宽度的情况下使用
- auto 该列/行自动
测试
<!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>
.main{
display: grid;
/* 3个100,代表有3列,每一列宽度100px */
/* grid-template-columns: 100px 100px 100px; */
/* 上边代码等价于 */
/* grid-template-columns: repeat(3,100px); */
/* 当盒子没有给宽度,auto-fill会自动根据子项和100px来撑开盒子 */
/* grid-template-columns: repeat(auto-fill,100px); */
/* 按比例平分盒子 */
/* grid-template-columns: 1fr 2fr 3fr; */
/* 中间自动分配 */
grid-template-columns: 100px auto 100px;
/* 第二列宽度大小的变化最下只能变到150px,在盒子没有宽度的情况使用 */
/* grid-template-columns:1fr minmax(150px,1fr); */
/* 4个100,代表有4行,每一行宽度100px */
grid-template-rows: 100px 100px 100px 100px;
width: 600px;
height: 600px;
border: 10px solid red;
}
.item{
background-color: pink;
font-size: 20px;
}
.item:nth-child(2n){
background-color: green;
}
</style>
</head>
<body>
<div class="main">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">0</div>
</div>
</body>
</html>
结果演示
容器属性 row-gap/column-gap/gap
子项相互之间的距离
- row-gap 行与行之间的距离
- column-gap 列与列之间的距离
- gap 前两个属性合起来的写法(简写) 例 gap:20px 20px 或者 gap:20px
容器属性 grid-template-areas
一个区域有单个或者多个单元格组成
grid-template-areas: 'a a a' /* 第一行的三个网格划分为一个区域,名字为a*/
'd e f' /* 第二行三个网格对应不同的区域*/
'g . i';/* 第二行左右各占一个区域,中间不给区域名字*/
其实给容器设置区域,等价于grid-template-*设置行和列的个数了
容器属性 grid-auto-flow
划分网格后,容器的子项会按照默认顺序“先行后列”排列,即填满第一行,再开始放第二行,就是子项的排列顺序.
比如下图的三列布局
又比如下图三列布局,其中有子项太大,导致后边放不下其他子项,就会造成页面的浪费,使用dense就能紧密排列.
容器属性 justify-items(水平方向) / align-items(垂直方向)
justify-items:start / end / center / stretch
其中justify-items(水平方向) + align-items(垂直方向) 可以用place-items : center center简写他们两个
容器属性 justify-content(水平方向) / align-content(垂直方向)
设置整个内容区域的水平和垂直的对齐方式
容器属性 grid-auto-columns / grid-auto-rows
用来设置多出来的项目宽和高
项目属性 grid-column-start……
从哪条网格线开始,哪结束
上图的两个属性设置,可以简写为 grid-column: 1 / 3 ;
另外还有grid-column-start:span 2 ; 代表跨越几个网格线开始
项目属性 gird-area
指定项目放在哪一个区域
项目属性 justify-self / align-self / place-self
rem适配布局（推荐）
rem单位
rem是一个相对单位，类似于 em相对于父元素字体大小，不同的是rem的基准是相对于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">
<title>rem单位</title>
<style>
html{
font-size: 14px;
}
div{
font-size: 12px;
}
p{
width: 10rem;
height: 10rem;
background-color: red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
结果演示
媒体查询
- 使用@media查询，可以针对不同的屏幕尺寸设置不同的样式
- 重置浏览器大小的过场中，页面也会根据浏览器的宽度和高度重新渲染页面
语法：
@media mediatype and|not|only (media feature){
css;
}
- mediatype 媒体类型
- media feature媒体特性
媒体类型
关键字
关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件
- and 可以将多个媒体特性链接到一起，“且”
- not 排除某个媒体类型， “非”
- only 指定某个特定的媒体类型
媒体特性
<!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>媒体查询</title>
<style>
/* 在屏幕上、最大宽度是800像素(即小于等于800px才会变成红色)，设置成我们规定的样式 */
@media screen and (max-width:800px){
body{
background-color: red;
}
}
</style>
</head>
<body>
</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>动态变化</title>
<style>
/* 由于实现不了动态变化，故注释
html{
font-size: 100px;
} */
@media screen and (min-width:320px) {
html{
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html{
font-size: 100px;
}
}
.top{
height: 1rem;
font-size: .5rem;
/* text-align: center;
line-height: 1rem; */
background-color: red;
color: rgb(255, 240, 240);
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
</html>
结果演示
引入资源（了解）
当样式比较多的时候，可以针对不同的媒体使用不同的stylesheets(样式表)，即直接在link判断设备的尺寸，然后引用不同的css文件。
<link rel="stylesheet" href="style.css" media="screen and (min-width: 320px)">
