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属性将失效
- 子容器可以横向排列也可以纵向排列
<!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来表示占多少份数
左侧右侧固定,中间自适应测试:
<!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)">