首页 > 其他 > 详细

媒体查询

时间:2019-09-23 20:02:37      阅读:121      评论:0      收藏:0      [点我收藏+]
如果一个网页既要使用于pc端 又得使用于移动端 :
1. 响应式设计 利用媒体查询判断设备的宽度 采用不同的css 华为官网和苹果官网
2.设计开发的时候 直接开发两个版本 PC和移动端两个版本 发送请求一个网页的 时候,根据请求判断当前设备类型 返回不同的一个网页 [淘宝 百度]

媒体查询赋予css有判断设备类型和屏幕尺寸的能力
媒体查询样式仅在条件成立的时候执行

@media(条件1,条件2){}
(注释:max-width 最大的宽度 指的是视口的宽度 )
@media(max-width:1600px) {
section {
background-color: yellowgreen;
width: 1200px;
}
}
@media(max-width:1200px) {
( 注释:当视口的宽度小于1200px的时候 满足该条件)
section {
background-color: orange;
}
}
(注释:宽高比 小于1/1)
@media(max-aspect-ratio:1/1) {
.box {
height: 300px;
}
}

媒体查询

原文:https://www.cnblogs.com/baixuezhemei/p/11574235.html

(1)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!