目录
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>结果演示
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)">