[适配]
1.响应式布局
1.2媒体查询
- 语法:@media 查询规则{}
媒体类型:
- all:所有设备
- print:打印设备(打印出来为对应样式)
- screen:带屏幕的设备
- speech:屏幕阅读器
@media all{
body{
background-color:red;
}
}
@media all,screen{
body{
background-color:red;
}
}
@media only screen{ //only的使用主要是为了兼容一些老版本的浏览器
body{
background-color:red;
}
}
媒体特性
width:视口的宽度
height:视口的高度
min-width:视口的最小宽度(视口大于指定宽度时生效)
max-width:视口的最大宽度(视口小于指定宽度时生效)
@media (width:500px){
}
断点
- 样式切换的分界点,我们称其为断点,也就是网页的样式会在这个点时发生变化
常用的断点: - 小于768:超小屏幕,max-width=768px;(手机等移动设备)
- 大于768:小屏幕 ,min-width=768px;
- 大于992:中屏幕 min-width=992px;
- 大于1200:大屏幕 min-width-1200px;
表示断点范围
- and (与)
@media (min-width:768px) and (max-width:992){
}
- ,(或)
@media (max-width:768px) , (max-width:992){
}
- not(非)
@media not (max-width:768px) , (max-width:992){
}
2.响应式网页练习
编写规范
- 移动端优先
- 渐进增长
css
a {
color: #fff;
text-decoration: none
}
a:hover {
color: #c5c4c4
}
.top-bar-wrapper {
background-color: #000
}
.top-bar {
max-width: 1200px;
margin: 0 auto;
height: 48px;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: space-between
}
.left-menu:active .nav {
display: block
}
.left-menu .menu-icon {
width: 18px;
height: 48px;
position: relative
}
.left-menu .menu-icon li {
width: 18px;
height: 1px;
background-color: #fff;
position: absolute;
transform-origin: left center;
transition: .5s
}
.left-menu .menu-icon li:nth-child(1) {
top: 18px
}
.left-menu .menu-icon li:nth-child(2) {
top: 24px
}
.left-menu .menu-icon li:nth-child(3) {
top: 30px
}
.left-menu .menu-icon:hover li:nth-child(1) {
transform: rotateZ(40deg)
}
.left-menu .menu-icon:hover li:nth-child(2) {
opacity: 0
}
.left-menu .menu-icon:hover li:nth-child(3) {
transform: rotateZ(-40deg)
}
.left-menu .nav {
display: none;
position: absolute;
top: 48px;
left: 0;
bottom: 0;
right: 0;
background-color: #000;
padding-top: 60px
}
.left-menu .nav li {
width: 80%;
margin: 0 auto;
border-bottom: 1px solid #202020
}
.left-menu .nav li a {
line-height: 44px;
font-size: 16px;
display: block
}
.left-menu .nav li:last-child a {
display: inline-block;
margin-right: 6px
}
.left-menu .nav li span {
color: #fff;
font-size: 14px
}
@media only screen and (min-width:768px) {
.left-menu {
order: 2;
flex: auto
}
.left-menu .nav {
display: flex;
position: static;
padding: 0;
justify-content: space-around
}
.left-menu .nav li {
width: auto;
border-bottom: none
}
.left-menu .nav li a {
line-height: 48px
}
.left-menu .nav li span {
display: none
}
.left-menu .menu-icon {
display: none
}
.logo {
order: 1
}
.user-info {
order: 3
}
}
/*# sourceMappingURL=./meitu.css.map */
html
<!-- 创建菜单 -->
<ul class="nav">
<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="#">
<i class="iconfont">

</i>
</a>
<span>搜索 Meitu.com</span>
</li>
</ul>
</div>
<!-- logo -->
<h1 class="logo">
<a href="/">美图手机</a>
</h1>
<!-- 用户信息 -->
<div class="user-info">
<a href="#">
<i class="iconfont"></i>
</a>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。