目录
媒体查询
媒体查询 能使页面在不同终端设备上面达到不同的效果
媒体查询会根据设备的大小 自动识别加载不同的样式.
首先我们要设置meta标签
在head标签里面添加
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" >详细意思为:
meta 用来表达网页的属性和关键字 contert 内容 name=viewport 表示是不同视口的名字 width=decice-width 宽度等于当前设备的宽度 宽度等于设备的款速 maximum-scale 允许用户缩放到的最大比例（默认设置是1.0） user-scalable 用户是否可以收到缩放（默认设置为no）
然后我们在css里面设置 媒体查询语法
通常手机是小于768px;平板是大于768px小于992px.电脑是大于992px
@media screen and (max-width: 768px ){
/* 手机通常是双倍分辨率 当屏幕宽度最大为768px的时候
则通常是手机端*/
body{
background-color: yellow;
}
}
@media screen and (max-width: 992px) and (min-width: 768px) {
/* 在992和768之间的时候 通常是平板*/
body{
background-color: blue;
}
}
@media screen and (min-width: 992px) {
/* 屏幕最小是992 也就是大于992的时候 通常是pc端*/
body{
background-color: green;
}
}以上这个案例演示了 主背景在不同设备下 显示的颜色不同.
响应式布局
响应式布局需要依托媒体查询实现
能在不同屏幕 不同设备上面显示网页不同的展现方式就是响应式布局
优点
面对不同的分辨率 ,设备灵活性强;
能够快速解决多设备显示适应问题;
缺点
兼容各种设备工作量大,效率低下
代码累赘,会大量出现隐藏无用的元素,导致页面加载时间长,性能偏低.
响应式布局案例:
<body>
<!--布局
一个整个的网页大容器 root
头部全部的容器 toball
包括导航容器 nav
导航容器包括list容器 他包括2个内容
1，列表 包括4个列表 有4个超链接
2，搜索框包括 一个搜索文本框 一个搜索按钮框
-->
<div class="root">
<div class="topall">
<div class="nav">
<div class="list">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">购物</a></li>
<li><a href="#">旅游</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">作者</a></li>
</ul>
<div class="in">
<input class="in1" type="text" placeholder="手机">
<input class="in2" type="submit" value="搜索">
</div>
</div>
</div>
</div>
</div>
<input type="color">css
<!--
手机 小于768
平板 大于768 小于992
小屏幕 大于992 小于1240
大屏幕 大于1240
-->
<!--
响应式布局 优点
面对不同的分辨率设备灵活度强
能够快捷的解决多设备显示的适应问题
缺点
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载的时间长
-->
<style>
/*<!-- 第一步 去除网页默认边框-->*/
*{
margin: 0;
padding: 0;
}
/*第二部，操作我们的整个容器 让整个容器背景为灰色*/
.root{
background-color: gray;
}
/* 第三步 操作我们的导航容器 让导航框显示出来*/
.nav{
width: 100%;
background-color: #555;
}
/* 第四步 开始操作我们的列表容器 因为他包括一个列表ul区域 一个搜索容器*/
.list{
/*宽度整体百分之80*/
/*居中现实*/
width: 80%;
margin: 0 auto;
/*颜色只是看看位置，后期会给干掉*/
/*细节美化 干掉列表背景*/
/*background-color: yellow;*/
/* 由于子元素ul 列表的类元素 还有 容器都设置了浮动 所以在他父亲容器清楚浮动效果*/
overflow: hidden;
clear: both;
}
/* 第五步，操作我们的列表容器下面的列表*/
.list ul li{
/*1，让列表横向摆放 浮动*/
float: left;
/* 干掉列表前面的标记*/
list-style-type: none;
/* 让列表的每个元素不要挨着那么近 修改内边距*/
padding: 15px;
/*外边距也距离10px*/
margin: 10px;
}
/* 第六步 处理后面搜索框 也浮动起来且 向右边摆放*/
.nav .list .in{
/*往右摆放*/
float: right;
}
/* 第七部 由于列表里面的元素浮动 然后搜索框也浮动 导致挤到了 所以让我们ul也浮动起来 他们都在list容器下面的ul 让他也浮动起来*/
.list ul{
/*margin: 0 auto;*/
overflow: hidden;
clear: both;
float: left;
}
/* 第八步 细节美化，
1，当鼠标悬停到列表的每个超链接元素的时候 背景响应
2，美化超链接符号 干掉下划线，并且是字体间距稍微大一点点
3，美化搜索框
4，美化登录框
*/
/* 鼠标悬停设置*/
.list ul li:hover{
/**/
background-color: green;
/*边大一点*/
transform: scale(1.2,1.2);
}
/*当鼠标点击不松手的时候*/
.list ul li:active{
background-color: red;
}
/*美化超链接按钮*/
.list ul li a{
/*干掉下划线*/
text-decoration: none;
/* 颜色变白色*/
color: white;
/* 间距稍微扩大一点*/
/* letter-spacing: 10px;*/
}
/* 美化第一个搜索框 */
.in1{
/*设置宽度*/
width: 200px;
/*设置内边距*/
padding: 0 20px;
/* 设置外边距*/
margin: 15px 15px;
/* 设置高度*/
height: 40px;
/* 倒角一下 美观一下*/
border-radius: 40px;
/*清楚边框效果*/
border: none;
}
.in1:hover{
transform: scale(1.1,1.2);
}
/* 美化搜索按钮 呼吸灯效果也安排上*/
.in2{
width: 50px;
height: 40px;
border-radius: 10px;
/* 添加一个外边距*/
margin: 20px;
/* 设置呼吸灯效果*/
animation: name1 3s linear infinite alternate;
}
@keyframes name1 {
/*直接从百分之50开始*/
50%{
opacity: 0.5;
box-shadow: 0 0 2px 2px rgba(0,0,0,0.5);
}
100%{
opacity: 1;
box-shadow: 0 0 2px 2px rgba(0,0,0,1);
}
}
/* 当鼠标悬停的时候 添加一个特效*/
.in2:hover{
transform: scale(1.2,1.2);
}
/*当鼠标点击不松手的时候效果*/
.in2:active{
transform: scale(0.8,0.8);
}
/* 这个案例的重点来了 响应式布局 不同设备上面的不同现实效果
一套代码 通过响应式布局 完成
具体代码如下：
*/
/* 在手机上的时候*/
@media screen and (max-width: 768px){
/*列表内容居中*/
.list{
width: 100%;
margin: 0 auto;
}
/* 搜索框隐藏*/
.in{
display: none;
}
}
/*在平板的时候 */
@media screen and (min-width: 768px) and (max-width: 992px){
/*列表内容居中*/
.list{
/*这个像素值解释根据我们导航宽度来调整*/
width: 768px;
margin: 0 auto;
}
/*当在平板的时候 搜索框变成块级元素*/
.in{
display: block;
}
}
/*在pc端的时候 */
@media screen and (min-width: 992px) {
/*列表内容居中*/
.list{
width: 80%;
margin: 0 auto;
}
/*当在平板的时候 搜索框变成块级元素*/
.in{
display: block;
}
}
</style>效果
电脑端
平板端
手机端
总结
3875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
