媒体查询
Posted liu_kaiyao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了媒体查询相关的知识，希望对你有一定的参考价值。
媒体查询
响应式布局：
1） pc端
1.类似于腾讯视频
容器的宽度随着屏幕的分辨率大小的改变而改变
2.纯响应式（与mobile兼容）
完全兼容移动设备
2) mobile端
手机型号不同，宽度不同
1.不要给容器【块元素】指定宽度，让它默认为100%
2.子元素【列元素】宽度使用相对单位，百分数
1.使用@media
.products {
width: 990px;
margin: 0 auto;
}
.products>ul{
display:flex;
justify-content: space-between;
flex-wrap: wrap;
height: 100px;
overflow: hidden;
}
.products > ul > li {
width: 19.5%;
height: 100px;
background-color: rebeccapurple;
list-style: none;
}
@media screen and (min-width: 1300px) {
.products {
width: 1200px;
}
.products >ul>li {
width: 16.5%;
}
<body>
<div class="products">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></div>
</body>
2.将不同分辨率的内容写到css文件中，用link引入到html文件中
<link media="screen and (min-width: 1300px)" rel="stylesheet" href="./css/style_normal.css">
<link media="screen and (min-width: 1300px)" rel="stylesheet" href="./css/style_big.css">
<link media="screen and (min-width: 1300px)" rel="stylesheet" href="./css/style_big.css">
以上是关于媒体查询的主要内容，如果未能解决你的问题，请参考以下文章