一、媒体查询
介绍:可以通过css查询出来屏幕宽度
作用:根据不同的屏幕宽度展示不同的效果
屏幕宽度的分类
>1200 大屏电脑
996-1200 中小屏电脑
768-996 pad
<768 手机
css2里的媒体查询 写在link标签里
<link rel="stylesheet" href="./1.css" media="screen and (min-width:1200px)"> <link rel="stylesheet" href="./2.css" media="screen and (min-width:996px) and (max-width:1200px)"> <link rel="stylesheet" href="./3.css" media="screen and (min-width:768px) and (max-width:996px)"> <link rel="stylesheet" href="./4.css" media="screen and (max-width:768px)"> 手机里的横屏和竖屏 <link rel="stylesheet" href="1.css" media="screen and (orientation:landscape)"> 横屏 <link rel="stylesheet" href="3.css" media="screen and (orientation:portrait)"> 竖屏
css3 里的媒体查询 写在css文件里
/* >1200 大屏电脑 5 996-1200 中小屏电脑 4 768-996 pad 3 <768 phone 2 */ @media screen and (min-width:1200px){ p{ column-count: 5; background-color: red; } } @media screen and (min-width:996px) and (max-width:1200px) { p{ column-count: 4; background-color: green; } } @media screen and (min-width:768px) and (max-width:996px){ p{ column-count: 3; background-color: pink; } } @media screen and (max-width:768px){ p{ column-count: 2; background-color: blue; } }
两种方案 二选一
电脑端优先 大屏幕先执行
比如 当前屏幕是1300px(执行最上边) 当前屏幕是600px(执行到最后) 最上边 充当 >1200 @media screen and (max-width:1200px){ li{ width: 25%; } } @media screen and (max-width:996px){ li{ width: 33.33%; } } @media screen and (max-width:768px){ /* 第三次 */ li{ width: 50%; } }
手机端优先 小屏幕先执行
当前屏幕是1300px(应用最后一个) 当前屏幕是600px(应用最上边的) 最上边 充当<768 /* 768-996 */ @media screen and (min-width:768px) { li{ width: 33.33%; } } /* 996-1200 */ @media screen and (min-width:996px) { li{ width: 25%; } } /* >1200 */ @media screen and (min-width:1200px) { li{ width:20%; } }
二、响应式布局
2.1核心技术
媒体查询
弹性盒子
百分比布局
2.2 响应式布局的原理
原理:媒体查询
2.3 响应式布局的优缺点
优点:
1、减少工作量,设计、代码、内容只需要写一份。多出来一些css样式和js脚本 2、节省时间、节约成本 3、每个设备都能得到良好的设计
缺点:
1、会加载更多的样式和js脚本 2、设计比较难精准控制(细节处理的不太好)
2.4、响应式的使用场景
展示性的企业站(苹果官网、星巴克官网..)、个人博客、后台管理系统