响应式布局笔记
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>