web前端全系列 教程
1839个小节阅读:2243k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
一说到响应式设计,肯定离不开媒体查询media
响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式
xxxxxxxxxx
<div class="container-fluid">
<div class="nav">
<div class="list">
<ul>
<li class="select"><a href="#">首页</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">电视</a></li>
</ul>
<div class="search">
<input type="text" placeholder="手机">
</div>
</div>
</div>
</div>
x*{
margin: 0;
padding: 0;
}
body{
background-color: #f1f1f1;
}
.nav{
width: 100%;
height: 50px;
line-height: 50px;
background-color: #555;
}
.nav ul{
float: left;
}
.nav ul li{
list-style: none;
float: left;
padding: 0 20px;
}
.nav ul li a{
text-decoration: none;
color: #fff;
font-size: 16px;
}
.select{
background-color: #333;
}
.nav .search{
float: right;
width: 400px;
height: 100%;
text-align: right;
line-height: 50px;
}
.nav .search input{
width: 200px;
height: 30px;
border-radius: 50px;
border:0;
padding-left: 10px;
}
xxxxxxxxxx
@media screen and (max-width: 768px) {
.nav .search {
display: none;
}
.nav .list {
width: 100%;
margin: 0 10px;
}
}
@media screen and (max-width: 992px) and (min-width: 768px) {
.nav .search {
display: block;
}
.nav .list {
width: 800px;
margin: 0 auto;
}
}
@media screen and (min-width: 992px) {
.nav .search {
display: block;
}
.nav .list {
width: 1240px;
margin: 0 auto;
}
}
实时效果反馈
1.下列关于响应式布局描述错误的是:
A 面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题
B 兼容各种设备工作量大,效率低下
C 代码累赘,会出现隐藏无用的元素,加载时间加长
D 同时加载多种样式,并且全部可以显示出来
答案
1=>D