响应式布局笔记
1.MediaQuery：媒体查询（媒介查询）：为不同尺寸的屏幕设定不同的CSS样式
/* screen代表屏幕尺寸 */ @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; } }
@media常用参数
width、height：浏览器可视宽度、高度
device-width：设备屏幕的宽度
device-height：设备屏幕的高度
案例1：当屏幕尺寸大于400px时，每行显示三个div，当屏幕尺寸在300-399px之间，每行显示两个div，当屏幕尺寸在200-299px之间，每行显示一个div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div0{
width: 100%;
}
#div0 div{
float: left;
height: 200px;
}
/* screen代表屏幕尺寸 */
@media screen and (min-device-width:400px){
#div0 div{
width: 33.33%;
}
#div0 div:nth-child(1){
background-color: red;
}
#div0 div:nth-child(2){
background-color: blueviolet;
}
#div0 div:nth-child(3){
background-color: aquamarine;
}
}
@media screen and (min-device-width:300px) and (max-device-width:399px){
#div0 div{
width: 50%;
}
#div0 div:nth-child(1){
background-color: red;
}
#div0 div:nth-child(2){
background-color: blueviolet;
}
#div0 div:nth-child(3){
background-color: aquamarine;
}
}
@media screen and (min-device-width:200px) and (max-device-width:299px){
#div0 div{
width: 100%;
}
#div0 div:nth-child(1){
background-color: red;
}
#div0 div:nth-child(2){
background-color: blueviolet;
}
#div0 div:nth-child(3){
background-color: aquamarine;
}
}
</style>
</head>
<body>
<div id="div0">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
2.媒体查询的其他引入方式
（1）style标签：写在style标签中，有条件的执行某个内部样式表 （screen主要是用来显示是打印还是屏幕显示，通常屏幕都是用来显示的 所以Screen可以不加）
<style media="(min-device-width:300px) and (max-device-width:399px)"> #div0 div{ width: 33.33%; } </style> <style media="(min-device-width:400px) and (max-device-width:499px)"> #div0 div{ width: 50%; } </style>
（2）link引入：写在Link标签中，有条件的引入外部样式表
<link rel="stylesheet" type="text/css" href="./css2.css" media="(min-device-width:300px) and (max-device-width:399px)"/>
<link rel="stylesheet" type="text/css" href="./css3.css" media="(min-device-width:400px) and (max-device-width:499px)"/>
3.flex弹性布局
什么是flex：FlexiableBox即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题。
为什么使用flex？
1.用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局
2.更加符合响应式设计的特点
属性：
（1）flex-direction（如果子元素横向排列，主轴为X轴，如果子元素纵向排列，主轴为Y轴）
作用：子元素在父元素盒子中的排列方式
属性值 作用
row 默认值。按从左到右的顺序显示
row-reverse 与row相同，但是以相反的顺序
column 灵活的项目将垂直显示，按从上到下的顺序
column-reverse 与column相同，但是以相反的顺序
（2）flex-wrap
作用：子元素在父元素盒子中是否换行（列）
属性值 作用
nowrap 默认值。不换行或不换列
wrap 换行或换列
wrap-reverse 换行或换列，但以相反的顺序
（3）flex-flow 作用：flex-direction和flex-wrap属性的简写形式
语法：flex-flow:<flex-direction> || <flex-wrap>
（4）剩余空间调整为间距 ： justify-content
作用：用来在存在剩余空间时，设置为间距的方式
属性值 作用
flex-start 默认值。从左到右，挨着行的开头
flex-end 从右到左，挨着行的结尾
center 居中显示
space-between 平均分布在该行上，两边不留间隔空间
space-around 平均分布在该行上，两边留有一半的间隔空间
space-evenly 可以使每个元素之间和元素距离边距的距离都相等，但是兼容性比较差（iphone的SE上不支持，会失效，相当于没有设置）
（5）align-items
作用：设置每个flex元素在交叉轴上的默认对齐方式
align-items处理单行：指把每一行都当成一个独立的个体去处理
（如果X为主轴那么Y轴则为交叉轴）
属性值 作用
flex-start 位于容器的开头
flex-end 位于容器的结尾
center 居中显示
(6)align-content
align-content处理多行：指把多行都当成一个整体去处理
作用：设置每个flex元素在交叉轴上的默认对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div0{
/* width: 500px; */
/* 不够显示的情况下，自动对子元素进行压缩 */
width: 380px;
height: 400px;
background-color: #8A2BE2;
display: flex;
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
/* 父元素宽度小于子元素，设置换行后，不对子元素的宽度压缩了 */
/* flex-wrap: wrap-reverse; */
/* //X为主轴 */
flex-flow: row wrap;
/* flex-flow: column wrap;//Y 为主轴 */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
justify-content: space-around;
align-items: flex-start;
/* align-items: flex-end; */
/* align-items处理单行：指把每一行都当成一个独立的个体去处理 */
/* align-items: center; */
/* align-content: center; */
/* align-content:flex-start; */
}
#div0 div{
/* 如果子元素没有设置宽度，则每个子元素的宽度特别小，并不会适应父元素的宽度，这是因为没有设置自动伸缩， */
width: 100px;
height: 100px;
background-color: #7FFF00;
/* margin-top: 10px;//使用flex依然可以使用 */
}
</style>
</head>
<body>
<div id="div0">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
(7) 其他属性
属性值 作用
flex-basis 设置弹性盒伸缩基准值 ---- 设置宽度
flex-grow 设置弹性盒子的扩展比率 ----- 当子元素的总宽度小于父元素时，利用此属性进行填充父元素
flex-shrink 设置弹性盒子的缩小比率 ---- 子元素总宽度大于总宽度
flex flex-grow、flex-shrink、flex-basis的缩写
（grow和shrink大于等于1代表可以放大缩小，等于0代表固定值，不变）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#div0{
width: 400px;
height: 500px;
background-color: #9400D3;
display: flex;
}
#div0 div{
width: 200px;
height: 200px;
background-color: #7FFFD4;
/* flex-basis: 50px;//设置后width将不会生效 */
/* flex-basis: 30%;//400*30%=120px */
}
/*
总宽度：400 第一个子元素50 第二个子元素宽度 100
则剩余宽度400-50-100=250
250/2（其中2表示，第一个子元素flex-grow：1占一份，第二个占一份）=125
则第一个子元素最终宽度50+125=175
第二个子元素最终宽度100+125=225
*/
/* #div0 div:nth-child(1){
flex-basis: 50px;
flex-grow: 1;//占得分数
}
#div0 div:nth-child(2){
flex-basis: 100px;
/* flex-grow: 1; */
/* flex-grow: 4;
} */
/* flex-shrink
400-600=-200
200/(1+3)=50
第一个子元素：300-50=250
第二个子元素：300-3*20=150
*/
#div0 div:nth-child(1){
/* flex-basis: 300px; */
/* flex-shrink: 0;//0表示不缩小 */
/* flex-shrink: 1; */
flex: 1 1 300px;
}
#div0 div:nth-child(2){
/* flex-basis: 300px; */
/* flex-shrink: 0; */
/* flex-shrink: 3; */
flex: 4 3 300px;
}
</style>
<body>
<div id="div0">
<div></div>
<div></div>
</div>
</body>
</html>
4.flex的特殊写法
属性 作用
flex:auto flex:1 1 auto
flex:none flex:0 0 auto
flex:0% flex:1 1 0%
flex:100px flex:1 1 100px
flex:1 flex:1 1 0%
首先以前两个为准，前两个都为零后第三个才有用 第三个为auto 则width会生效
案例1：输入框布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div0{
width: 250px;
display: flex;
border: 1px solid #dcdcdc;
}
#div0 input{
border: none;
outline: none;//鼠标点击内容使没有样式
}
#div0 label{
background-color: #f5f5f5;
font-family: "楷体";
text-align: center;
flex: 1;
}
/* #div0 label:nth-child(3){ //及时flex设置了1,依然可对其中一个进行单独的修改
flex: 0 0 25px;
} */
</style>
</head>
<body>
<div id="div0">
<label>姓名</label>
<input type="text" name="" id="" value="" />
<label>go</label>
</div>
</body>
</html>
案例2：长表单布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 横向排列，X为主轴 */
/* #form div{
display: flex; 父
/* margin-top: 10px; //通常方法可通过margin-top设置两行的距离*/
/* height: 30px;
align-items: flex-start;
}
#form div label{
flex: 0 0 100px; 子
text-align: right;
} */
/* 纵向排列，Y为主轴*/
#form div{
display: flex;
flex: 0 0 30px; /* 子 */
align-items: flex-start;
}
#form div label{
text-align: right;
flex: 0 0 100px;
}
#form{
display: flex; /* 父 */
flex-direction: column;
}
</style>
</head>
<body>
<form action="" method="">
<div id="form">
<div id="">
<label>姓名：</label>
<input type="text" name="" id="" value="" />
</div>
<div>
<label>请输入密码：</label>
<input type="text" name="" id="" value="" />
</div>
</div>
</form>
</body>
</html>
5.rem的使用方法
概念：指相对于根元素的字体大小的单位
与em区别：em字体有继承关系，级联关系，因此计算时较为麻烦 平时一般都用rem
rem案例
使用媒体查询+rem或js，在不同宽度的视口下自动调整字体大小
<script type="text/javascript">
var c=()=>{
let w=document.documentElement.clientWidth; //获取设备的宽度
// 20表示以20px为基准 1rem=20px 320手机的大小 如果宽度大于40则最大按照40排序显示，小于40则计算
let n=(20*(w/320)>40?40+"px":(20*(w/320)+"px"));
}
window.addEventListener("load",c);
window.addEventListener("resize",c)
</script>
<style type="text/css">
html{
/* font-size: 10px; */
}
div{
font-size: 1rem;
}
</style>
<body>
<div>123</div>
</body>
6.自适应布局 （两个html）
布局特点：不同设备对应不同的html 局部自适应 不同的设备用不同的页面或局部伸缩
设计思路：判断设备的类型或控制局部的变化
<script type="text/javascript">
var redirect=()=>{
//获取设备的信息
let userAgent = navigator.userAgent.toLowerCase();
//正则表达式，判断设备类型
let device = /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/;
//判断设备
if(device.test(userAgent)){
//跳转移动端页面
window.location.href="move.html";
}else{
//跳转pc端页面
window.location.href="pc.html";
}
}
redirect();
</script>
7.响应式布局 (一个页面不同的css 对css操作)
布局特点：确保一个页面在所有终端上，都能显示出令人满意的效果
设计思路：使用%或rem作为单位，此处采用%为单位
//进行当前视口的一些控制 width决定宽度 initial-scale在默认情况先显示原始尺寸 user-scalable是否允许缩放 0--no 表示不使用浏览器自身的缩放 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/> <link rel="stylesheet" type="text/css" href="css/big.css" media="(min-device-width:1000px)"/> <link href="css/small.css" rel="stylesheet" media="(min-device-width:400px) and (max-device-width:600px)" />
html
<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>图片</li> <li>图片</li> <li>图片</li> <li>图片</li> <li>图片</li> <li>图片</li> <li>图片</li> <li>图片</li> </div> </div> </div>
css big.css
*{
margin: 0px;
padding: 0px;
background-color: #F5F5F5;
}
#layout{
display: flex;
flex-direction: column;
width: 80%;
margin: 0 auto;
}
#top{
background-color: yellow;
width:100%;
/* height: 50px; */
flex: 0 0 50px;
margin: 0 auto;
}
#main{
width:100%;
display: flex;
}
#main div:first-child{
flex: 0 0 10%;
background-color: #F5F5F5;
list-style: none;
display: flex;
flex-wrap: wrap;
border-left: 1px solid white;
border-right: 1px solid white;
}
#main div:first-child li{
flex: 0 0 100%;
height: 40px;
text-align: center;
border-bottom: 1px solid white;
}
#main div:nth-child(2){
flex: 0 0 90%;
background-color: #F5F5F5;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#main div:nth-child(2) li{
flex: 0 0 30%;
background-color: yellow;
height: 120px;
margin-top: 10px;
text-align: center;
}
small.css
*{
margin: 0px;
padding: 0px;
background-color: #F5F5F5;
}
#layout{
display: flex;
flex-direction: column;
width: 100%;
margin: 0 auto;
}
#top{
background-color: yellow;
width:100%;
/* height: 50px; */
flex: 0 0 50px;
margin: 0 auto;
}
#main{
width:100%;
display: flex;
flex-wrap: wrap;
}
#main div:first-child{
flex: 0 0 100%;
background-color: #F5F5F5;
list-style: none;
display: flex;
flex-wrap: wrap;
border-left: 1px solid white;
border-right: 1px solid white;
align-content: flex-start;
}
#main div:first-child li{
flex: 0 0 30%;
height: 40px;
text-align: center;
border-bottom: 1px solid white;
}
#main div:nth-child(2){
flex: 0 0 90%;
background-color: #F5F5F5;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#main div:nth-child(2) li{
flex: 0 0 30%;
background-color: yellow;
height: 120px;
margin-top: 10px;
text-align: center;
}
8.rem弹性布局
布局特点：为了保证在各种屏幕上的不失真，就要根据实际屏幕宽度做等比例换算
一句话：一套方案，使不同尺寸，分辨率的视口，都能呈现出较好的效果
设计思路：使用%或rem作为单位，此处采用rem为单位
<script type="text/javascript">
var c=()=>{
let w=document.documentElement.clientWidth; //获取设备的宽度
// 20表示以20px为基准 1rem=20px 320手机的大小 如果宽度大于40则最大按照40排序显示，小于40则计算
let n=(20*(w/320)>40?40+"px":(20*(w/320)+"px"));
}
window.addEventListener("load",c);
window.addEventListener("resize",c)
</script>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
<div id="div0">
<div id="top">
<img id="logo" src="logo/4.png" >
</div>
<div id="main">
<ul>
<li>
<div> <img src="logo/4.png" class="logo" > </div>
<div>慕课精品成长课，培养更高思维+技术能力的综合性高端前端人才</div>
<div><img src="logo/gouwuche.png" class="shopCar" ></div>
</li>
<li>
<div> <img src="logo/4.png" class="logo" > </div>
<div>慕课精品成长课，培养更高思维+技术能力的综合性高端前端人才</div>
<div><img src="logo/gouwuche.png" class="shopCar" ></div>
</li>
<li>
<div> <img src="logo/4.png" class="logo" > </div>
<div>慕课精品成长课，培养更高思维+技术能力的综合性高端前端人才</div>
<div><img src="logo/gouwuche.png" class="shopCar" ></div>
</li>
<li>
<div> <img src="logo/4.png" class="logo" > </div>
<div>慕课精品成长课，培养更高思维+技术能力的综合性高端前端人才</div>
<div><img src="logo/gouwuche.png" class="shopCar" ></div>
</li>
<li>
<div> <img src="logo/4.png" class="logo" > </div>
<div>慕课精品成长课，培养更高思维+技术能力的综合性高端前端人才</div>
<div><img src="logo/gouwuche.png" class="shopCar" ></div>
</li>
</ul>
</div>
</div>
<div id="bottom">
<div><img src="logo/zhu-ye.png" ></div>
<div><img src="logo/gouwuche.png" ></div>
</div>
css main.css
*{
margin: 0;
padding: 0;
}
html{
font-size: 25px;
}
#top,#main,#bottom{
width: 100%;
}
#top{
position: fixed; /* 固定位置 */
top: 0;
left: 0;
right: 0;
height: 2rem;
z-index: 1000;
background-color: #F5F5F5;
}
#logo{
width: 4rem;
height: 1rem;
vertical-align: -webkit-baseline-middle; /*垂直居中*/
}
#main{
height: auto;
position: absolute;
top: 2rem;
border: 2rem;
background-color: #F5F5F5;
}
#main ul{
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 0.5rem;
}
.shopCar{
width: 1rem;
height: 1rem;
vertical-align: -webkit-baseline-middle; /*垂直居中*/
}
.logo{
width: 3.6rem;
height: 2rem;
vertical-align: -webkit-baseline-middle; /*垂直居中*/
}
#main ul li{
flex:1 1 3rem;
display: flex;
border: 1px solid #DCDCDC;
align-items: center;
}
#main ul li div{
margin-left: 0.2rem;
margin-right: 0.5rem;
}
#bottom{
position: fixed; /* 固定位置 */
bottom: 0;
left: 0;
right: 0;
height: 2rem;
z-index: 1000;
background-color: #F5F5F5;
display: flex;
}
#bottom div{
flex: 1 1 auto;
text-align: center;
}
#bottom div img{
width: 1.5rem;
height: 1.5rem;
vertical-align: -webkit-baseline-middle;
}
<script>
var c=()=>{
let w = document.documentElement.clientWidth;
console.log(w)
let n = w / (1920 / 10) + "px"
console.log(n)
document.documentElement.style.fontSize=n;
}
window.addEventListener("load",c);
window.addEventListener("resize",c);
</script>
解决部分元素被挤压
flex-shrink：0
浙公网安备 33010602011771号